ടാസ്ക്

ഒരു ബ്ലോക്ക് മൂലകവും അതിലെ എല്ലാ ഉള്ളടക്കങ്ങളും അർദ്ധ സുതാര്യമാക്കുക.

പരിഹാരം

ഒരു മൂലകത്തിൻ്റെ സുതാര്യതയുടെ അളവ് മാറ്റാൻ, 0 മുതൽ 1 വരെയുള്ള മൂല്യമുള്ള ഒപാസിറ്റി സ്റ്റൈൽ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക, അവിടെ 0 പൂർണ്ണ സുതാര്യതയുമായി യോജിക്കുന്നു, 1, നേരെമറിച്ച്, ഒബ്‌ജക്റ്റിൻ്റെ അതാര്യതയുമായി. ഈ പ്രോപ്പർട്ടി ഇൻ്റർനെറ്റ് എക്സ്പ്ലോററിൽ പ്രവർത്തിക്കുന്നില്ല, അതിനാൽ നിങ്ങൾ ഇതിനായി പ്രത്യേകമായി ഫിൽട്ടർ ഉപയോഗിക്കേണ്ടതുണ്ട്, ഇത് CSS സ്പെസിഫിക്കേഷൻ്റെ ഭാഗമല്ല. എല്ലാ ബ്രൗസറുകൾക്കും ലെയർ സുതാര്യത എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ഉദാഹരണം 1 കാണിക്കുന്നു.

ഉദാഹരണം 1: അർദ്ധസുതാര്യ പാളി

HTML5 CSS 2.1 IE Cr Op Sa Fx

ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.

അരി. 1. സഫാരി ബ്രൗസറിൽ അർദ്ധസുതാര്യമായ പാളി

കുറഞ്ഞത് ഒരു അളവുകൾ (വീതി അല്ലെങ്കിൽ ഉയരം) സജ്ജീകരിച്ചിരിക്കുന്നതോ മൂലകം കേവല സ്ഥാനനിർണ്ണയത്തിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നതോ ആയ മൂലകങ്ങൾക്ക് മാത്രമേ ഫിൽട്ടർ പ്രോപ്പർട്ടി സുതാര്യത നൽകുന്നുള്ളൂ (സ്ഥാനം: കേവലം ).

ചൈൽഡ് ഘടകങ്ങൾ ഉൾപ്പെടെ ലെയറിൻ്റെ മുഴുവൻ ഉള്ളടക്കങ്ങളെയും സുതാര്യത ബാധിക്കുന്നു എന്നതും ശ്രദ്ധിക്കുക, അതാര്യതയിൽ വ്യത്യാസം വരുത്തിക്കൊണ്ട് നിങ്ങൾക്ക് അവയുടെ അതാര്യതയുടെ അളവ് വർദ്ധിപ്പിക്കാൻ കഴിയില്ല. ഉദാഹരണം 1-ൽ, ലെയറിൻ്റെ അതാര്യത 0.7 ആയി സജ്ജമാക്കിയാൽ, ലെയറിനുള്ളിലെ ടെക്‌സ്‌റ്റിന് അതേ മൂല്യം ലഭിക്കും. ഇത് കുറച്ച് സജ്ജീകരിക്കുന്നത് അനുവദനീയമാണ്, പക്ഷേ വാചകത്തിന് 0.7 ൻ്റെ സുതാര്യത കവിയാൻ കഴിയില്ല.

പേജ് ഘടകങ്ങളിൽ സുതാര്യമായ പ്രഭാവം പ്രയോഗിക്കുന്നതിന് അതാര്യത പ്രോപ്പർട്ടി CSS3 നിർവ്വചിക്കുന്നു. ഈ വസ്തുവിൻ്റെ മൂല്യം 0.0 മുതൽ 1.0 വരെയുള്ള ശ്രേണിയിലുള്ള ഒരു സംഖ്യയാണ്. പൂജ്യത്തിന് തുല്യമായ ഒരു മൂല്യം ഉപയോഗിച്ച്, മൂലകം പൂർണ്ണമായും സുതാര്യമായിത്തീരുന്നു, കൂടാതെ ഒന്നിന് തുല്യമായ മൂല്യത്തിൽ, അതനുസരിച്ച്, അത് ഒട്ടും സുതാര്യമല്ല. ഏത് പേജ് ഘടകങ്ങളിലേക്കും പ്രോപ്പർട്ടി പ്രയോഗിക്കാവുന്നതാണ്.

Img1 ( അതാര്യത: 0.2; ) .img2 ( അതാര്യത: 0.5; ) .img3 ( അതാര്യത: 1.0; )

ഒരു സ്ക്രിപ്റ്റിലൂടെ സുതാര്യത സജ്ജീകരിക്കാൻ, ഉപയോഗിക്കുക: object.style.opacity

പഴയ മോസില്ലയും ഫയർഫോക്സും 0.8 ഈ പ്രോപ്പർട്ടിക്ക് സ്വന്തം പേര് ഉപയോഗിക്കുന്നു: -moz-opacity ഒരു സ്ക്രിപ്റ്റിലൂടെ സുതാര്യത സജ്ജീകരിക്കാൻ, ഉപയോഗിക്കുക: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - KHTML എഞ്ചിനിൽ നിർമ്മിച്ചിരിക്കുന്നത്, സുതാര്യത നിയന്ത്രിക്കാൻ ഇനിപ്പറയുന്ന പ്രോപ്പർട്ടി ഉപയോഗിക്കുക: -khtml-opacity ഒരു സ്ക്രിപ്റ്റിലൂടെ സുതാര്യത സജ്ജമാക്കാൻ, ഉപയോഗിക്കുക: object.style.KhtmlOpacity

പതിപ്പ് 1.2 മുതൽ സഫാരി CSS3 അതാര്യത ഉപയോഗിക്കുന്നു, എന്നാൽ പതിപ്പ് 3.1-നേക്കാൾ പഴയ കോൺക്വറർ, -khtml-opacity പിന്തുണയ്ക്കുന്നത് നിർത്തിയതിനാൽ, CSS3 അതാര്യതയ്ക്കുള്ള പിന്തുണ അവതരിപ്പിച്ചില്ല.

ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ, പതിപ്പ് 5.5 മുതൽ ആരംഭിച്ച്, Internet Explorer 7-ൻ്റെ ഏറ്റവും പുതിയ പതിപ്പ് ഉൾപ്പെടെ, Alpha DirectX ഫിൽട്ടറിലൂടെ സുതാര്യത നടപ്പിലാക്കുന്നു. ഈ ഫിൽട്ടർ 0 മുതൽ 100 ​​വരെ (0.0 മുതൽ 1.0 വരെ അല്ല) വരെയുള്ള സുതാര്യത മൂല്യം ഉപയോഗിക്കുന്നു എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. ഉയരം, അല്ലെങ്കിൽ വീതി, അല്ലെങ്കിൽ പൊസിഷൻ പ്രോപ്പർട്ടി കേവലം അല്ലെങ്കിൽ റൈറ്റിംഗ് മോഡ് tb-rl, അല്ലെങ്കിൽ contentEditable true ആയി സജ്ജീകരിച്ചിരിക്കുന്ന ഒരു ഘടകത്തിൽ മാത്രമേ ഫിൽട്ടർ പ്രയോഗിക്കാൻ കഴിയൂ എന്നതും ഞാൻ ശ്രദ്ധിക്കുന്നു.

ഉദാഹരണം (സുതാര്യത പകുതിയായി സജ്ജമാക്കുക):

Img1 (ഫിൽട്ടർ:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ വാക്യഘടന (ഇഷ്ടപ്പെട്ടത്) */ .img2 (ഫിൽട്ടർ: ആൽഫ(ഒപാസിറ്റി=50); ) /* IE4 വാക്യഘടന */ വരെ ഒരു സ്ക്രിപ്റ്റിലൂടെ സുതാര്യത സജ്ജമാക്കുക, ഉപയോഗിക്കുക: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(പാരാമീറ്റർ സ്ട്രിംഗ്)"

W3C സുതാര്യതയ്ക്ക് സമാനമായ സുതാര്യത ലഭിക്കുന്നതിന്, ഒരു പാരാമീറ്റർ സ്ട്രിംഗായി “ഒപാസിറ്റി=0 മുതൽ 100 ​​വരെയുള്ള സംഖ്യ” എന്ന മൂല്യം ഉപയോഗിക്കുക.

എല്ലാ ബ്രൗസറുകളിലും ഇത് എങ്ങനെ പ്രവർത്തിക്കാം:

ഫിൽട്ടർ:പ്രോഗിഡ്:ഡിഎക്സ്ഇമേജ് ട്രാൻസ്ഫോം.മൈക്രോസോഫ്റ്റ്.ആൽഫ(ഒപാസിറ്റി=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* മോസില്ല 1.6 ഉം അതിനു താഴെയുള്ളതും */ -khtml-opacity: 0.5; /* കോൺക്വറർ 3.1, സഫാരി 1.1 */ അതാര്യത: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

ജാവാസ്ക്രിപ്റ്റ്

ഫംഗ്‌ഷൻ setElementOpacity(sElemId, nOpacity) (var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); എങ്കിൽ (!elem || !opacityProp) മടങ്ങുക; // ബ്രൗസറിനോടോ ബ്രൗസറിനോടോ ഒരു ഘടകവും ഇല്ലെങ്കിൽ (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // സുതാര്യത ഇതിനകം സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ, അത് ഫിൽട്ടറുകൾ ശേഖരണത്തിലൂടെ മാറ്റുകയാണെങ്കിൽ, സുതാര്യത നിയന്ത്രിക്കുന്നതിനുള്ള അറിയപ്പെടുന്ന രീതികളിലൊന്നും പിന്തുണയ്ക്കുന്നില്ല. സുതാര്യത ചേർക്കുക. DXImageTransform.Microsoft.Alpha(ഒപാസിറ്റി ="+nOpacity+")"; // മറ്റ് ഫിൽട്ടറുകൾ പുനരാലേഖനം ചെയ്യാതിരിക്കാൻ, "+=" ) വേറെ ഉപയോഗിക്കുക // മറ്റ് ബ്രൗസറുകൾ elem.style = nOpacity; ) ഫംഗ്‌ഷൻ getOpacityProperty() ( എങ്കിൽ typeof document.body.style.opacity == "string") // CSS3 കംപ്ലയിൻ്റ് (Moz 1.7+, Safari 1.2+, Opera 9) "opacity" തിരികെ നൽകുക; ") // Mozilla 1.6 ഉം അതിനുമുമ്പും , Firefox 0.8 "MozOpacity" തിരികെ നൽകുന്നു;

അല്ലാത്തപക്ഷം (typeof document.body.style.KhtmlOpacity == "string") // കോൺക്വറർ 3.1, സഫാരി 1.1 "KhtmlOpacity" നൽകുന്നു;

അല്ലെങ്കിൽ (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ റിട്ടേൺ "ഫിൽട്ടർ";

തെറ്റായി മടങ്ങുക; //സുതാര്യതയില്ല)

നല്ല ദിവസം, വെബ് ഡെവലപ്‌മെൻ്റ് ഗീക്കുകൾ, അതുപോലെ പുതുമുഖങ്ങൾ. ഐടി ട്രെൻഡുകളോ വെബ് ഫാഷനോ പിന്തുടരാത്തവർക്കായി, ഈ വിഷയത്തെക്കുറിച്ചുള്ള ഈ പ്രസിദ്ധീകരണം നിങ്ങൾക്ക് അനുയോജ്യമാണെന്ന് നിങ്ങളെ അറിയിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു: “സിഎസ്എസ് ടൂളുകൾ ഉപയോഗിച്ച് സുതാര്യമായ ബ്ലോക്ക് എങ്ങനെ നിർമ്മിക്കാം”. വാസ്തവത്തിൽ, നിലവിലെ 2016 ൽ, ഓൺലൈൻ സേവനങ്ങളിലേക്ക് വിവിധ സുതാര്യമായ വസ്തുക്കൾ അവതരിപ്പിക്കുന്നത് ഒരു സ്റ്റൈലിഷ് നീക്കമായി കണക്കാക്കപ്പെടുന്നു.

ഇത്, എൻ്റെ അഭിപ്രായത്തിൽ, ആധുനിക പരിഹാരങ്ങൾ പ്രവർത്തിക്കാത്ത ബ്രൗസറുകളുടെ പഴയ പതിപ്പുകളിൽ "ക്രച്ച്" തീർച്ചയായും സഹായിക്കുന്നു. എന്നാൽ ടെക്സ്റ്റ് ഡിസ്പ്ലേ ഗുണനിലവാരം ശ്രദ്ധിക്കേണ്ടതാണ് , അത്തരം ആലേഖനം, കുത്തനെ വീഴുന്നു.

രീതി 2. വിഷമിച്ചിട്ടില്ല

അപൂർവ സന്ദർഭങ്ങളിൽ, ഡെവലപ്പർമാർ ഒരു അർദ്ധസുതാര്യ ഇമേജ് അവതരിപ്പിക്കുന്നതിനുള്ള പ്രശ്നം... ഒരു റെഡിമെയ്ഡ് അർദ്ധസുതാര്യ ഇമേജ് തിരുകിക്കൊണ്ട് പരിഹരിക്കുന്നു! ഇതിനായി, PNG-24 ഫോർമാറ്റിൽ സംരക്ഷിച്ചിരിക്കുന്ന ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നു. ഈ ഗ്രാഫിക് ഫോർമാറ്റ് 256 ലെവലുകൾ അർദ്ധസുതാര്യമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

എന്നിരുന്നാലും, ഈ രീതി പല കാരണങ്ങളാൽ സൗകര്യപ്രദമല്ല:

1. ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ 6 ഈ സാങ്കേതികവിദ്യയിൽ പ്രവർത്തിക്കുന്നില്ല;
2. നിങ്ങൾക്ക് css-ൽ പശ്ചാത്തല നിറങ്ങൾ മാറ്റാൻ കഴിയില്ല;
3. ബ്രൗസറിൻ്റെ ഇമേജ് ഡിസ്പ്ലേ ഫംഗ്ഷൻ പ്രവർത്തനരഹിതമാക്കിയാൽ, അത് അപ്രത്യക്ഷമാകും.

രീതി 3. പ്രമോട്ടുചെയ്‌തു

ഒരു ബ്ലോക്ക് സുതാര്യമാക്കുന്നതിനുള്ള ഏറ്റവും സാധാരണവും അറിയപ്പെടുന്നതുമായ മാർഗ്ഗം സ്വത്താണ് അതാര്യത.

പരാമീറ്റർ മൂല്യം ശ്രേണിയിൽ വ്യത്യാസപ്പെടുന്നു, ഇവിടെ 0-ൽ ഒബ്‌ജക്റ്റ് അദൃശ്യവും 1-ൽ അത് പൂർണ്ണമായും ദൃശ്യവുമാണ്. എന്നിരുന്നാലും, ഇവിടെയും ചില അസുഖകരമായ നിമിഷങ്ങളുണ്ട്.

ഒന്നാമതായി, എല്ലാ ശിശു ഘടകങ്ങളും സുതാര്യത അവകാശമാക്കുന്നു. ഇതിനർത്ഥം നൽകിയ വാചകം പശ്ചാത്തലത്തോടൊപ്പം "പ്രകാശിക്കും" എന്നാണ്.

രണ്ടാമതായി, ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ വീണ്ടും "മൂക്ക് ഉയർത്തുന്നു" കൂടാതെ, പതിപ്പ് 8 വരെ പ്രവർത്തിക്കുന്നില്ല അതാര്യത.

ഈ പ്രശ്നം പരിഹരിക്കാൻ, ഉപയോഗിക്കുക ഫിൽട്ടർ:ആൽഫ (അതാര്യത=മൂല്യം).

നമുക്ക് ഒരു ഉദാഹരണം നോക്കാം.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

രീതി 4. ആധുനികം

ഇന്ന്, പ്രൊഫഷണലുകൾ rgba (r, g, b, a) ടൂൾ ഉപയോഗിക്കുന്നു.

RGB എന്നത് ജനപ്രിയമായ വർണ്ണ മോഡലുകളിലൊന്നാണെന്ന് മുമ്പ് ഞാൻ നിങ്ങളോട് പറഞ്ഞിരുന്നു, അവിടെ ചുവപ്പിൻ്റെ എല്ലാ ഷേഡുകൾക്കും R, പച്ച ഷേഡുകൾക്ക് G, നീല ഷേഡുകൾക്ക് B എന്നിവയാണ് ഉത്തരവാദികൾ.

css പരാമീറ്ററിൻ്റെ കാര്യത്തിൽ, A വേരിയബിൾ ആൽഫ ചാനലിന് ഉത്തരവാദിയാണ്, അത് സുതാര്യതയ്ക്ക് ഉത്തരവാദിയാണ്.

സ്റ്റൈലൈസ്ഡ് ബ്ലോക്കിനുള്ളിൽ സ്ഥിതി ചെയ്യുന്ന വസ്തുക്കളെ ആൽഫ ചാനൽ ബാധിക്കില്ല എന്നതാണ് പിന്നീടുള്ള രീതിയുടെ പ്രധാന നേട്ടം.

rgba(r, g, b, a) ഇനിപ്പറയുന്നതിൽ നിന്ന് ആരംഭിക്കുന്നു:

• ഓപ്പറ പതിപ്പ് 10;
• ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ 9;
• സഫാരി 3.2;
• ഫയർഫോക്സിൻ്റെ 3 പതിപ്പുകൾ.

രസകരമായ ഒരു വസ്തുത ചൂണ്ടിക്കാണിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു! പ്രോപ്പർട്ടികൾ സംയോജിപ്പിക്കുമ്പോൾ പ്രിയപ്പെട്ട ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ 7 ഒരു പിശക് എറിയുന്നു പശ്ചാത്തല നിറംനിറങ്ങളുടെ പേരിനൊപ്പം (പശ്ചാത്തല-നിറം: സ്വർണ്ണം). അതിനാൽ, നിങ്ങൾ മാത്രം ഉപയോഗിക്കണം:

പശ്ചാത്തല നിറം: rgba (255, 215, 0, 0.15)

ഇപ്പോൾ ഒരു ഉദാഹരണം.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

ഞങ്ങളുടെ സ്റ്റോറിൽ നിങ്ങൾക്ക് എല്ലാത്തരം പൂക്കളും കാണാം.

ബ്ലോക്കിൻ്റെ ടെക്‌സ്‌റ്റ് ഉള്ളടക്കം പൂർണ്ണമായും ദൃശ്യമാണ് (100% കറുപ്പ്), അതേസമയം പശ്ചാത്തലം 0.88 ആൽഫ ചാനലിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു, അതായത്. 88%.

ഇത് പ്രസിദ്ധീകരണം അവസാനിപ്പിക്കുന്നു. എൻ്റെ ബ്ലോഗ് സബ്സ്ക്രൈബ് ചെയ്യുക, സുഹൃത്തുക്കളെ ക്ഷണിക്കാൻ മറക്കരുത്. വെബ് ഭാഷകൾ പഠിക്കുന്നതിൽ നിങ്ങൾക്ക് ആശംസകൾ നേരുന്നു! ബൈ ബൈ!

വിവരണം

ഒരു വെബ് പേജ് ഘടകത്തിൻ്റെ സുതാര്യത നില നിർണ്ണയിക്കുന്നു. ഘടകം ഭാഗികമായോ പൂർണ്ണമായോ സുതാര്യമാകുമ്പോൾ, അർദ്ധസുതാര്യമായ ഒബ്‌ജക്റ്റിന് താഴെയുള്ള പശ്ചാത്തല ചിത്രമോ മറ്റ് ഘടകങ്ങളോ ദൃശ്യമാകും.

വാക്യഘടന

അതാര്യത: മൂല്യം

മൂല്യങ്ങൾ

മൂല്യം ശ്രേണിയിൽ നിന്നുള്ള ഒരു സംഖ്യയാണ്. 0 ൻ്റെ മൂല്യം മൂലകത്തിൻ്റെ പൂർണ്ണ സുതാര്യതയുമായി യോജിക്കുന്നു, 1, നേരെമറിച്ച്, അതിൻ്റെ അതാര്യതയുമായി യോജിക്കുന്നു. ഫോമിൻ്റെ ഫ്രാക്ഷണൽ നമ്പറുകൾ 0.6 സെറ്റ് അർദ്ധസുതാര്യത. അതാര്യത പോലെ മുൻനിര പൂജ്യമില്ലാതെ അക്കങ്ങൾ എഴുതാൻ ഇത് അനുവദിച്ചിരിക്കുന്നു: .6.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.

അരി. 1. അതാര്യത ഉപയോഗിക്കുന്നതിൻ്റെ ഫലം

ബ്രൗസറുകൾ

3.5 പതിപ്പിന് മുമ്പുള്ള ഫയർഫോക്സ് നിലവാരമില്ലാത്ത -moz-opacity പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നു.

ഈ ബ്രൗസറിന് സുതാര്യത മാറ്റാൻ ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ പതിപ്പ് 9.0 വരെ ഫിൽട്ടറുകൾ ഉപയോഗിക്കുന്നു: alpha(opacity=50) , അവിടെ അതാര്യത പരാമീറ്ററിന് 0 മുതൽ 100 ​​വരെ മൂല്യം എടുക്കാം.