CSS இல் ஒளிபுகாநிலையைப் பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தும்



இந்த கட்டுரை உங்களை CSS இல் ஒளிபுகாநிலையைப் புரிந்துகொள்ளவும், இந்த அளவுருவை எவ்வாறு கட்டுப்படுத்துவது என்பதைக் கூறவும் உதவும் கருத்தை உங்களுக்கு அறிமுகப்படுத்தும்.

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

ஒரு உறுப்பின் பின்னணி ஒளிபுகாநிலை என்பது HTML வடிவமைப்பில் ஒரு பயனுள்ள அம்ச அமைப்பாகும். ஒளிபுகாநிலையின் அளவை (வெளிப்படைத்தன்மையின் தலைகீழ்) அமைப்பதன் மூலம், ஒரு வடிவமைப்பாளர் CSS ஒளிபுகா சொத்து மூலம் உறுப்பின் தெரிவுநிலையைக் கட்டுப்படுத்த முடியும். உறுப்புகளின் அடுக்கு இருக்கும் போது இது பொதுவாக பின்னணி அமைப்பாகப் பயன்படுத்தப்படுகிறது, ஒன்று மற்றொன்றுக்கு மேல் வைக்கப்படுகிறது.





இந்த அம்சம் பயன்படுத்தப்படும் மிகவும் பொதுவான காட்சி இது:

  • ஒரு பகுதி வெளிப்படையான பின்னணி படம் உரை உறுப்புக்கு பின்னால் வைக்கப்பட்டுள்ளது.
  • பின்னணி படம் அபாயகரமாக தெரியும், எனவே இது முன்னால் உள்ள உரையில் ஆதிக்கம் செலுத்துவதில்லை.
  • பயனர் அதைப் பார்க்க வெளிப்படையாகத் தேர்ந்தெடுக்கும்போது படம் முழு கவனம் செலுத்தக்கூடும்.

நீங்கள் படிக்க விரும்பலாம் CSS ஒளிபுகாநிலையைப் பற்றி அறிந்து கொள்வதற்கு முன்.



ஒரு விரிவான CSS பயிற்சிக்கு, பார்வையிடவும் தொடக்கக்காரர்களுக்கான எடுரேகா சிஎஸ்எஸ் பயிற்சி . HTML வலை வடிவமைப்பை அதிகரிக்க CSS பயன்படுத்தப்பட வேண்டிய வழியில் நீங்கள் ஒரு சிறந்த தலைப்பைப் பெறுவீர்கள்.

CSS இல் ஒளிபுகாநிலையைப் பற்றிய இந்த கட்டுரையுடன் நகரும்

CSS இல் ஒளிபுகாநிலை

CSS இல், ஒளிபுகாநிலை 0.0 - 1.0 வரை ஒரு எண் மதிப்பாக அமைக்கப்பட்டுள்ளது. பூஜ்ஜியத்திற்கு நெருக்கமான மதிப்புகள் அதிக வெளிப்படைத்தன்மையைக் குறிக்கின்றன, படம் பார்வைக்கு மிகவும் இலகுவாக இருக்கும். 50% வெளிப்படைத்தன்மையுடன் ஒரு படம் காண்பிக்கப்படுவதற்கான எடுத்துக்காட்டுடன் ஆரம்பிக்கலாம். கீழே உள்ள எடுத்துக்காட்டு 1 ஐக் காண்க.



எடுத்துக்காட்டு 1: பின்னணி படம் அரைக்கு அமைக்கப்பட்டுள்ளது வெளிப்படைத்தன்மை

ஜாவாவில் tcp சாக்கெட் நிரலாக்க
img {ஒளிபுகாநிலை: 0.5 வடிகட்டி: ஆல்பா (ஒளிபுகாநிலை = 50) / * IE8 மற்றும் அதற்கு முந்தைய * /} வெளியீடு- CSS- எடுரேகாவில் ஒளிபுகா 

எடுத்துக்காட்டு 1: வெளியீடு

அசல் படம் (100% ஒளிபுகாநிலை)

50% ஒளிபுகா அமைப்பைக் கொண்ட படம்

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

CSS இல் ஒளிபுகாநிலையைப் பற்றிய இந்த கட்டுரையுடன் நகரும்

ஒளிபுகா அடுக்குகளுடன் கூடிய மரபுரிமை

உறுப்புகள் ஒன்றன் பின் ஒன்றாக அடுக்கி வைக்கப்படும்போது, ​​பின்னணி உறுப்பு ஒளிபுகா அமைப்பைக் கொண்டிருந்தால், அது எல்லா குழந்தை உறுப்புகளாலும் பெறப்படுகிறது. இந்த இயல்பான கட்டமைப்பு . அதாவது ஒரு படத்தின் மேல் ஒரு உரை பெட்டி வைக்கப்பட்டு, படத்திற்கு 0.5 ஒளிபுகா அமைப்பு இருந்தால், படம் மற்றும் உரை உறுப்பு இரண்டும் ஓரளவு மட்டுமே தெரியும்.

எங்கள் அடுத்த எடுத்துக்காட்டில் TOM & JERRY படத்தின் மீது வைக்கப்பட்டுள்ள குழந்தை உரை உறுப்பு உதாரணத்தை எடுத்துக்கொள்வோம். எடுத்துக்காட்டு 2 இல் இயல்புநிலை ஒளிபுகா விளைவை நாம் காணலாம்.

.container {position: உறவினர் உரை-சீரமை: மைய ஒளிபுகாநிலை: 0.5}. மையப்படுத்தப்பட்ட {நிலை: முழுமையான மேல்: 50% இடது: 50% உருமாற்றம்: மொழிபெயர்க்க (-50%, -50%) நிறம்: நீல எழுத்துரு அளவு: 40px} } டோம் & ஜெர்ரி

எடுத்துக்காட்டு 2: உரை பெற்றோர் படத்திலிருந்து ஒளிபுகாநிலையைப் பெறுகிறது

CSS இல் ஒளிபுகாநிலையைப் பற்றிய இந்த கட்டுரையுடன் நகரும்

அடுக்கு உறுப்புகளுக்கான RGBA பண்புக்கூறு அமைப்பு

அடுக்கு உறுப்புகளைக் கொண்டு ஒளிபுகாநிலையைக் கட்டுப்படுத்த மற்றொரு வழி உள்ளது. குழந்தை உறுப்பு அதன் பின்னணி உறுப்பு ஒளிபுகாநிலையால் பாதிக்கப்படாமல் இருக்க விரும்பினால், நீங்கள் பயன்படுத்தலாம் RGBA பண்புக்கூறு அமைப்பு .

எடுத்துக்காட்டு 3: RGBA அமைப்பைப் பயன்படுத்துதல்

பின்னணி: rgba (76, 175, 80, 1.0) / * படத்திற்கு ஒளிபுகா அமைப்பு இல்லை * / / * 100% ஒளிபுகாநிலையுடன் கூடிய உரைக்கான பச்சை பின்னணி * / / * நீல வண்ண உரை 100% ஒளிபுகாநிலையைக் கொண்டுள்ளது * /

பின்னணி: rgba (76, 175, 80, 0.4) / * படத்திற்கு ஒளிபுகா அமைப்பு இல்லை * / / * 40% ஒளிபுகாநிலையுடன் கூடிய உரைக்கான பச்சை பின்னணி * / / * நீல உரை இன்னும் 100% ஒளிபுகாநிலையுடன் காணப்படுகிறது * /

RGB வண்ண குறியீட்டிற்குப் பிறகு, பண்புக்கூறு ‘a’ குறிக்கிறது ஆல்பா . தி ஆல்பா அளவுரு என்பது 0.0 (முழுமையாக வெளிப்படையானது) மற்றும் 1.0 (முழுமையாக ஒளிபுகா) ஆகியவற்றுக்கு இடையிலான எண்.

CSS இல் ஒளிபுகாநிலையைப் பற்றிய இந்த கட்டுரையுடன் நகரும்

மிதவை விளைவில் ஒளிபுகா மாற்றங்கள்

சில சூழ்நிலைகளில், வலை வடிவமைப்பாளர்கள் பயனர் உறுப்பு மீது கவனம் செலுத்துகிறார்களா இல்லையா என்பதைப் பொறுத்து ஒளிபுகாநிலை மாறுபட வேண்டும். உதாரணமாக, இயல்புநிலையாக ஒரு படம் 50% ஒளிபுகாநிலையாக அமைக்கப்பட்டுள்ளது என்று சொல்லலாம். இருப்பினும், பயனர் சுட்டியை படத்தின் மீது வட்டமிடும்போது, ​​படம் 100% ஒளிபுகாநிலையுடன் முழு கவனம் செலுத்த வேண்டும்.

எடுத்துக்காட்டு 4 இது எவ்வாறு செய்யப்படுகிறது என்பதைக் காட்டுகிறது.

கவனிக்க வேண்டிய பொதுவான புள்ளிகள்:

ஜாவாவில் அதிகாரங்களை எவ்வாறு செய்வது
  • CSS இல் ‘தெரிவுநிலை’ பண்புக்கூறு பயன்படுத்துவதற்கு ஒளிபுகா அமைப்பு ஒரு மாற்றாகும். இருப்பினும், ஒளிபுகா அமைப்பைப் பயன்படுத்துவது பூஜ்ஜியத்திலிருந்து முழு வரை மாறுபட்ட அளவு வெளிப்படைத்தன்மையை அமைப்பதை எளிதாக்குகிறது.
  • பல்வேறு உலாவிகளில் கவனமாக சோதனை செய்தபின் ஒளிபுகாநிலையின் நிலை அமைக்கப்பட வேண்டும். ஒளிபுகாநிலையானது குறைந்த மதிப்புகளுக்கு அமைக்கப்பட்டால், சில நேரங்களில் உரை அல்லது படம் முற்றிலும் கண்ணுக்கு தெரியாததாகவோ அல்லது படிக்க முடியாததாகவோ மாறக்கூடும்.
  • ஒளிபுகாநிலையைப் பயன்படுத்துவதற்குப் பின்னால் உள்ள யோசனை, சில கூறுகளில் கூர்மையான கவனம் செலுத்துவதோடு, பிற பின்னணி கூறுகள் பயனரின் கவனத்தை திசை திருப்பாது. எனவே இத்தகைய பின்னணி கூறுகள் குறைந்த ஒளிபுகாநிலையுடன் அமைக்கப்பட்டிருக்கும்.
  • இன்டர்நெட் எக்ஸ்ப்ளோரரில், IE8 மற்றும் பழைய பதிப்புகளுக்கு, ஒளிபுகா சொத்து என்பது 1 முதல் 100 வரையிலான ‘வடிகட்டி’ அமைப்பாகும். மற்ற எல்லா உலாவிகளிலும் இது 0 முதல் 1 வரை இருக்கும்.

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

வலை அபிவிருத்தி பற்றி மேலும் அறிய நீங்கள் விரும்பினால், பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி ஈர்க்கக்கூடிய வலைத்தளங்களை எவ்வாறு உருவாக்குவது மற்றும் அமேசான் எளிய சேமிப்பக சேவைக்கு (S3) பயன்படுத்துவது எப்படி என்பதை அறிய வலை அபிவிருத்தி சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.

நீங்கள் இன்னும் ஆர்வமாக இருந்தால், உங்களுக்கு ஏதேனும் கேள்வி இருந்தால், இந்த “CSS இன் ஒளிபுகா” வலைப்பதிவின் கருத்துப் பிரிவில் இடுகையிடலாம், விரைவில் நாங்கள் உங்களைத் தொடர்புகொள்வோம்.