CSS3 தன்மை பற்றி அறிய

உங்கள் பின்னணியை வெளிப்படையாக உருவாக்குதல்

நீங்கள் எளிதில் அச்சிட வடிவமைப்பில் செய்யக்கூடிய விஷயங்களில் ஒன்று, ஆனால் இணையத்தில் அல்ல ஒரு படம் அல்லது நிற பின்னணியில் மேலடுக்கு உரையாகும், மேலும் அந்த படத்தின் வெளிப்படைத்தன்மையை மாற்றுவதன் மூலம் உரை பின்னணியில் மாறுகிறது. ஆனால், உங்கள் உறுப்புகளின் ஒளிபுகாநிலையைக் மாற்ற அனுமதிக்கும் CSS3 இல் ஒரு சொத்து உள்ளது, அதனால் அவை மறைந்து விடுகின்றன, அதனால் அவை மறைகின்றன: ஒளிபுகா.

ஒளிர்வு சொத்து எப்படி பயன்படுத்துவது

ஒளிபுகாநிலையானது 0.08 இலிருந்து 1.0 வரை வெளிப்படைத்தன்மையின் மதிப்பை எடுக்கும்.

0.0 என்பது 100% வெளிப்படையானது-அந்த உறுப்புக்கு கீழே எதையும் முழுமையாக காண்பிக்கும். 1.0 100% ஒளிபுகா-உறுப்புக்கு கீழே எதுவும் காட்டாது.

எனவே 50% வெளிப்படையான ஒரு உறுப்பு அமைக்க, நீங்கள் எழுத வேண்டும்:

ஒளிர்வு: 0.5;

நடவடிக்கைகளில் ஒளிபுகாவின் சில எடுத்துக்காட்டுகளைப் பார்க்கவும்

பழைய உலாவிகளில் சோதிக்க நிச்சயமாக இருங்கள்

எந்த IE 6 அல்லது 7 ஆதரவு CSS3 ஒளிபுகா சொத்து. ஆனால் நீங்கள் அதிர்ஷ்டம் இல்லை. மாறாக, ஒரு மைக்ரோசாப்ட்-மட்டுமே சொத்து ஆல்பா வடிப்பான் ஐ ஆதரிக்கிறது. IE இல் ஆல்ஃபா வடிகட்டிகள் 0 (முழுமையாக வெளிப்படையானவை) 100 (முற்றிலும் ஒளிபுகா) க்கு மதிப்புகளை ஏற்கின்றன. எனவே, IE இல் உங்கள் வெளிப்படைத்தன்மையைப் பெறுவதற்கு, உங்கள் ஒளியினை 100 ஆல் பெருக்கி, உங்கள் பாணியில் ஆல்பா வடிப்பான் சேர்க்க வேண்டும்:

வடிகட்டி: ஆல்பா (ஒளிர்வு = 50);

நடவடிக்கை உள்ள ஆல்பா வடிப்பான் (IE மட்டும்) பார்க்கவும்

மற்றும் உலாவி முன்னொட்டுகள் பயன்படுத்தவும்

மொஸில்லா மற்றும் வெப்கிட் உலாவிகளின் பழைய பதிப்புகள் அதை ஆதரிக்கும் வகையில் -moz- மற்றும் -webkit- முன்னொட்டுகளைப் பயன்படுத்த வேண்டும்:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
ஒளிபுகாநிலை: 0.5;

எப்போதும் உலாவி முன்னொட்டுகளை முதலில் வைத்து, செல்லுபடியாகும் CSS3 சொத்து.

முசிலோ மற்றும் வெப்கிட் உலாவிகளில் உலாவி முன்னொட்டுகளை சோதிக்கவும்.

நீங்கள் படங்களை வெளிப்படையானதாக்கலாம்

படத்தை தன்னை ஒளிபுகா அமைக்க மற்றும் அது பின்னணி மங்காது. இந்த பின்னணி படங்களை மிகவும் பயனுள்ளதாக இருக்கும்.

நீங்கள் ஒரு நங்கூரம் குறிச்சொல்லில் சேர்க்கினால், படத்தின் ஒளிபுகாநிலையை மாற்றுவதன் மூலம் நீங்கள் மிதவை விளைவுகளை உருவாக்க முடியும்.

a: hover img {
வடிகட்டி: ஆல்பா (ஒளிர்வு = 50)
வடிகட்டி: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
ஒளிர்வு: 0.5;
}

இந்த HTML ஐ பாதிக்கிறது:

மேலே உள்ள பாணியையும், HTML இல் செயலையும் சோதிக்கவும்.

உங்கள் படங்களில் உரை வைக்கவும்

ஒளிபுகாநிலையுடன், நீங்கள் ஒரு படத்தின் மீது உரையை வைக்கலாம் மற்றும் அந்த உரை எங்கே என்று படத்தை மறைக்க தோன்றும்.

இந்த நுட்பம் கொஞ்சம் தந்திரமான ஒன்று, ஏனென்றால் நீங்கள் படத்தை வெறுமனே படமாக்க முடியாது, ஏனெனில் அது முழு படத்தை மங்கச் செய்யும். நீங்கள் உரை பெட்டியை மங்காது முடியாது, ஏனென்றால் உரை அங்கு மங்காது.

1. முதல் நீங்கள் ஒரு கொள்கலன் DIV ஐ உருவாக்கி உள்ளே உங்கள் படத்தை வைக்க:

   
   

2. வெற்று டிஐவி மூலம் படம் பின்தொடர - நீங்கள் வெளிப்படையாக செய்ய வேண்டும்.

   
   
   

3. உங்கள் HTML இல் நீங்கள் சேர்க்கும் கடைசி விஷயம், உங்கள் உரையுடன் DIV ஆகும்:

   
   
   
   இது என் நாய் சாஸ்தா. அவர் அழகாக இல்லை!

4. நீங்கள் CSS நிலைப்பாடு அதை பாணி, படத்தை மேலே உரை வைக்க. நான் இடதுபக்கத்தில் என் உரையை வைத்தேன், ஆனால் இரண்டு இடதுபுறத்தை மாற்றுவதன் மூலம் வலதுபுறத்தில் அதை வைக்கலாம்: 0; பண்புகள்: 0; .

   # முகப்பு {
   நிலை: உறவினர்;
   அகலம்: 170px;
   உயரம்: 128px;
   விளிம்பு: 0;
   }
   #text {
   நிலை: முழுமையான;
   மேல்: 0;
   இடது: 0;
   அகலம்: 60px;
   உயரம்: 118px;
   பின்னணி: #fff;
   திணிப்பு: 5px;
   }
   #text {
   வடிகட்டி: ஆல்பா (ஒளிர்வு = 70);
   வடிகட்டி: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0.70;
   ஒளிர்வு: 0.7;
   }
   # வார்த்தைகள் {
   நிலை: முழுமையான;
   மேல்: 0;
   இடது: 0;
   அகலம்: 60px;
   உயரம்: 118px;
   பின்னணி: வெளிப்படையான;
   திணிப்பு: 5px;
   }

அது எப்படி இருக்கும் என்பதைக் காண்க