CSS3 अपारदर्शकतेबद्दल जाणून घ्या

आपल्या पार्श्वभूमीत पारदर्शी बनविणे

आपण सहजपणे प्रिंट डिझाइनमध्ये करू शकता परंतु वेबवर नसलेल्या गोष्टींपैकी एक म्हणजे प्रतिमा किंवा रंगीत पार्श्वभूमीवर ओव्हरला मजकूर, आणि त्या प्रतिमेची पारदर्शकता बदलू जेणेकरून मजकूर पार्श्वभूमीमध्ये फडफड होईल. पण CSS3 मध्ये एक मालमत्ता आहे जी आपल्याला आपल्या घटकांची अपारदर्शकता बदलू शकते जेणेकरून ते वेदना आणि बाहेर वेडे जातीलः अस्पष्टता

अपारदर्शकता मालमत्ता कशी वापरावी

अपारदर्शक गुणधर्म 0.0 ते 1.0 पारदर्शकतेच्या मूल्याचे मूल्य घेते.

0.0 100% पारदर्शी आहे - त्या घटका खाली असलेले काहीही पूर्णपणे दर्शवेल 1.0 100% अपारदर्शक आहे- घटक खाली दर्शविलेले काहीही नाही.

म्हणून घटक सेट करण्यासाठी 50% पारदर्शी, आपण असे लिहू:

अपारदर्शकता: 0.5;

कृत्रिमता मध्ये अपारदर्शकतेची काही उदाहरणे पहा

जुन्या ब्राऊजरमध्ये परीक्षण करणे सुनिश्चित करा

IE 6 किंवा 7 दोन्हीपैकी CSS3 अपारदर्शक गुणधर्मस समर्थन देत नाहीत. परंतु आपण भाग्यवान नाही. त्याऐवजी, IE केवळ Microsoft-only संपत्ती अल्फा फिल्टरला समर्थन देते. IE मध्ये अल्फा फिल्टर 0 (पूर्णपणे पारदर्शक) पासून 100 पर्यंत (पूर्णपणे अपारदर्शक) मूल्य स्वीकारा. म्हणून, IE मध्ये आपली पारदर्शकता मिळविण्यासाठी, आपण 100 ने आपली अपारदर्शकता वाढवून आपल्या शैलीसाठी एक अल्फा फिल्टर जोडावे:

फिल्टर: अल्फा (अपारदर्शकता = 50);

कृतीमध्ये अल्फा फिल्टर पहा (IE केवळ)

आणि ब्राउझर उपसर्ग वापरा

आपण -मोझ आणि- webkit-prefixes वापरावी म्हणजे Mozilla आणि Webkit ब्राउझरच्या जुन्या आवृत्त्या तो देखील याचे समर्थन करतील:

-विबकिट-ऑपॅटीसी: 0.5;
-मोज-ऑपॅटीसी: 0.5;
अपारदर्शकता: 0.5;

नेहमी प्रथम ब्राउजर प्रिफिक्सेस लावा आणि शेवटी वैध CSS3 प्रॉपिक्सेस ठेवा.

जुन्या Mozilla आणि Webkit ब्राउझरमध्ये ब्राउझर प्रिफिक्सची चाचणी घ्या.

आपण प्रतिमा खूप पारदर्शी बनवू शकता

प्रतिमावर अस्पष्टता सेट करा आणि ती पार्श्वभूमीमध्ये फिकट होईल. पार्श्वभूमी प्रतिमांसाठी हे खरोखर उपयुक्त आहे

आणि आपण एखाद्या अँकर टॅगमध्ये जोडल्यास आपण प्रतिमाची अपारदर्शकता बदलून होव्हर प्रभाव तयार करू शकता.

a: hover img {
फिल्टर: अल्फा (अपारदर्शकता = 50)
फिल्टर: कागदपत्रे: DXImageTransform.Microsoft.Alpha (opacity = 50)
-मोज-ऑपॅटीसी: 0.5;
-विबकिट-ऑपॅटीसी: 0.5;
अपारदर्शकता: 0.5;
}

या HTML प्रभावित करते:

वरील शैली आणि कृतीमध्ये HTML तपासा.

आपल्या प्रतिमा वर मजकूर ठेवा

अपारदर्शकतेमुळे, आपण एका प्रतिमेवर मजकूर ठेवू शकता आणि त्या मजकुराची प्रतिमा कुठे कोसळते हे दिसून येत आहे.

हे तंत्र काही अवघड आहे, कारण आपण फक्त प्रतिमा विरहित करू शकत नाही, कारण ती संपूर्ण प्रतिमा विकृत होईल. आणि आपण मजकूर बॉक्समध्ये विरहित करू शकत नाही, कारण मजकूर तेथे विरळाही होईल.

1. प्रथम आपण एक कंटेनर DIV तयार करा आणि त्यामध्ये आपली प्रतिमा ठेवा:

   
   

2. रिकाम्या डीआयव्हीसह प्रतिमेचे अनुसरण करा म्हणजे तुम्ही पारदर्शक बनवाल.

   
   
   

3. आपण आपल्या HTML मध्ये जो शेवटचा जोडला आहे त्यात त्यात आपल्या मजकूरासह DIV आहे:

   
   
   
   हे माझे कुत्रा Shasta आहे. तो सुंदर नाही आहे!

4. आपण प्रतिमा वरील मजकूर ठेवण्यासाठी, सीएसएस स्तितीसह शैली. मी माझा मजकूर डाव्या बाजूला ठेवलेला आहे, परंतु आपण ते डाव्या बाजूला ठेवून उजवीकडे ठेवू शकता: 0; गुणधर्म उजवीकडे: 0; .

   #image {
   स्थान: सापेक्ष;
   रूंदीः 170px;
   उंची: 128 पीएक्स;
   समास: 0;
   }
   #text {
   स्थान: परिपूर्ण;
   शीर्ष: 0;
   डावी: 0;
   रुंदीः 60 पीएक्स;
   उंची: 118px;
   पार्श्वभूमी: #fff;
   पॅडिंग: 5px;
   }
   #text {
   फिल्टर: अल्फा (अपारदर्शकता = 70);
   फिल्टर: कॉग्निगेट: डीएक्सआयमेजट्रान्सफॉर्म. मायक्रोसॉफ्ट. अल्फा (ऑपॅसिटी = 70);
   -मोझ-ऑपॅटीसी: 0.70;
   अपारदर्शकता: 0.7;
   }
   #वर्ड {
   स्थान: परिपूर्ण;
   शीर्ष: 0;
   डावी: 0;
   रुंदीः 60 पीएक्स;
   उंची: 118px;
   पार्श्वभूमी: पारदर्शी;
   पॅडिंग: 5px;
   }

ते कसे दिसते ते पहा