CSS3 അതാര്യതയെക്കുറിച്ച് അറിയുക

നിങ്ങളുടെ പശ്ചാത്തലങ്ങൾ സുതാര്യമാക്കുന്നു

അച്ചടി രൂപകൽപ്പനയിൽ എളുപ്പത്തിൽ ചെയ്യാനാവുന്ന ഒരു കാര്യമാണ്, പക്ഷേ വെബിൽ ഒരു ഇമേജിലോ നിറമുള്ള പശ്ചാത്തലത്തിലോ ഓവർലേ ടെക്സ്റ്റ് ആണ്, കൂടാതെ ആ ചിത്രത്തിന്റെ സുതാര്യതയും മാറ്റുന്നു, അങ്ങനെ ടെക്സ്റ്റ് പശ്ചാത്തലത്തിലേക്ക് പ്രവേശിക്കുന്നു. എന്നാൽ നിങ്ങളുടെ ഘടകങ്ങളുടെ ഒപാസിറ്റി മാറ്റാൻ ഇത് നിങ്ങളെ അനുവദിക്കും, അങ്ങനെ അവ മങ്ങുകയും പുറത്ത് വരുകയും ചെയ്യും: അതാര്യത.

ഒപാസിറ്റി പ്രോപ്പർട്ടി എങ്ങനെയാണ് ഉപയോഗിക്കുക

ഒപ്റ്റിസിറ്റി പ്രോപ്പർട്ടി 0.0 മുതൽ 1.0 വരെയുള്ള സുതാര്യത അളവെടുക്കുന്നു.

0.0 എന്നത് 100% സുതാര്യമാണ്- ആ ഘടകത്തിന് താഴെയുള്ള എന്തെങ്കിലും പൂർണ്ണമായും കാണപ്പെടും. 1.0 എന്നത് 100% നിറവ്യത്യാസമാണ് - മൂലകത്തിന് താഴെ ഒന്നും കാണിക്കില്ല.

അങ്ങനെ 50% സുതാര്യത്തിലേക്ക് ഒരു ഘടകം സജ്ജമാക്കാൻ നിങ്ങൾ എഴുതുന്നു:

അതാര്യത: 0.5;

പ്രവർത്തനത്തിന്റെ ചില ഉദാഹരണങ്ങൾ കാണുക

പഴയ ബ്രൗസറുകളിൽ പരീക്ഷിക്കുന്നത് ഉറപ്പാക്കുക

ഐഒഎസ് 6 അല്ല 7 ന്റെ സെറ്റില്സിറ്റി ഓതറൈസസ് പിന്തുണയ്ക്കുന്നു. പക്ഷേ നിങ്ങൾക്ക് ഭാഗ്യമില്ല. പകരം, മൈക്രോസോഫ്റ്റിനു മാത്രമുള്ള ഒരു ആൽഫ ഫിൽറ്റർ പിന്തുണയ്ക്കുന്നു. IE ൽ ആൽഫാ ഫിൽട്ടറുകൾ 0 (പൂർണമായും സുതാര്യമാണ്) 100 (പൂർണ്ണമായും അതാര്യവുമാണ്) മുതൽ മൂല്യങ്ങൾ സ്വീകരിക്കുക. IE ൽ നിങ്ങളുടെ സുതാര്യത നേടുന്നതിന്, നിങ്ങളുടെ ഒപാസിറ്റി 100 കൊണ്ട് വർദ്ധിപ്പിച്ച് നിങ്ങളുടെ ശൈലിയിൽ ഒരു ആൽഫാ ഫിൽറ്റർ ചേർക്കുക:

ഫിൽറ്റർ: ആൽഫ (opacity = 50);

ആൽഫ ഫിൽട്ടർ പ്രവർത്തനത്തിൽ കാണുക (ഐഇ മാത്രം)

ബ്രൗസർ പ്രിഫിക്സുകൾ ഉപയോഗിക്കുക

മോസില്ല, വെബ്കിറ്റ് ബ്രൗസറുകളുടെ പഴയ പതിപ്പുകൾ ഇവയെ പിന്തുണയ്ക്കുന്നതിനു് -moz- ഉം -webkit- പ്രീഫിക്സുകളും ഉപയോഗിയ്ക്കണം:

-വെബ്ബിറ്റ്-അതാര്യത: 0.5;
-Moz-opacity: 0.5;
അതാര്യത: 0.5;

എല്ലായ്പ്പോഴും ആദ്യം ബ്രൌസർ പ്രീഫിക്സും, സാധുവായ CSS3 പ്രോപ്പർട്ടിയും അവസാനിപ്പിക്കുക.

പഴയ മോസില്ല, വെബ്കിറ്റ് ബ്രൗസറുകളിൽ ബ്രൗസർ പ്രിഫിക്സുകൾ പരീക്ഷിക്കുക.

ചിത്രങ്ങൾ സുതാര്യമാക്കുന്നതിന് നിങ്ങൾക്ക് കഴിയും

ചിത്രത്തിൽ അതാര്യത സജ്ജമാക്കുക, അത് പശ്ചാത്തലത്തിൽ മങ്ങുന്നു. ഇത് പശ്ചാത്തല ഇമേജുകൾക്ക് വളരെ ഉപയോഗപ്രദമാണ്.

നിങ്ങൾ ഒരു ആങ്കർ ടാഗിൽ ചേർത്തിട്ടുണ്ടെങ്കിൽ, ഇമേജിന്റെ അതാര്യത മാറ്റിക്കൊണ്ട് നിങ്ങൾക്ക് ഹോവർ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും.

a: hover img {
ഫിൽറ്റർ: ആൽഫ (opacity = 50)
ഫിൽറ്റർ: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-Moz-opacity: 0.5;
-വെബ്ബിറ്റ്-അതാര്യത: 0.5;
അതാര്യത: 0.5;
}

ഈ HTML ബാധിക്കുന്നു:

മുകളിൽ പറഞ്ഞിരിക്കുന്ന ശൈലികളും HTML- ലും പരീക്ഷിക്കുക.

നിങ്ങളുടെ ചിത്രങ്ങളിൽ വാചകം ഇടുക

അതാര്യവുമൊത്ത് നിങ്ങൾക്ക് ഒരു ചിത്രത്തിനു മുകളിലുള്ള ടെക്സ്റ്റ് സ്ഥാപിക്കുകയും ആ വാചകം എവിടെയാണെന്ന് മങ്ങിക്കുന്നതായി തോന്നുകയും ചെയ്യുന്നു.

ഈ രീതി അല്പം ദുർവിനിയോഗമാണ്, കാരണം ഇമേജ് മങ്ങിക്കാൻ കഴിയില്ല, കാരണം അത് മുഴുവൻ ഇമേജും ഇല്ലാതായിത്തീരും. ടെക്സ്റ്റ് ബോക്സും മങ്ങുന്നില്ല, കാരണം അവിടെ ടെക്സ്റ്റ് മായിക്കും.

1. ആദ്യം നിങ്ങളൊരു കണ്ടെയ്നർ ഡിവി സൃഷ്ടിച്ച് അതിൽ നിങ്ങളുടെ ചിത്രം സ്ഥാപിക്കുക:

   
   

2. ശൂന്യമായ DIV ഉള്ള ഇമേജ് പിന്തുടരുക - ഇത് നിങ്ങൾ സുതാര്യമാക്കുന്നതെങ്ങനെ എന്നതാണ്.

   
   
   

3. നിങ്ങളുടെ HTML ൽ ചേർക്കുന്ന അവസാന കാര്യം, അതിൽ നിങ്ങളുടെ വാചകം ഉള്ള DIV ആണ്:

   
   
   
   ഇത് എന്റെ നായ ശസ്ത ആണ്. അവൻ സുന്ദരനല്ലയോ?

4. ഇമേജിന്റെ മുകളിലുള്ള വാചകം സ്ഥാപിക്കുന്നതിനായി, നിങ്ങൾ CSS സ്റ്റേഷനിൽ ഇത് എഴുതുക. ഇടത് വശത്ത് എന്റെ വാചകം ഞാൻ സ്ഥാപിച്ചു, എന്നാൽ നിങ്ങൾ രണ്ട് ഇടത് മാറ്റിക്കൊണ്ട് വലത് വശത്ത് ഇടുക: 0; വലതുവശത്തുള്ള പ്രോപ്പർട്ടികൾ: 0; .

   #image {
   സ്ഥാനം: ബന്ധു;
   വീതി: 170px;
   ഉയരം: 128px;
   മാർജിൻ: 0;
   }
   #text {
   സ്ഥാനം: കേവലമായ;
   മുകളിൽ: 0;
   ഇടത്: 0;
   വീതി: 60px;
   ഉയരം: 118px;
   പശ്ചാത്തലം: # ff;
   പാഡിംഗ്: 5px;
   }
   #text {
   ഫിൽറ്റർ: ആൽഫാ (അതാര്യത = 70);
   ഫിൽറ്റർ: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -Moz-opacity: 0.70;
   അതാര്യത: 0.7;
   }
   #words {
   സ്ഥാനം: കേവലമായ;
   മുകളിൽ: 0;
   ഇടത്: 0;
   വീതി: 60px;
   ഉയരം: 118px;
   പശ്ചാത്തലം: സുതാര്യം;
   പാഡിംഗ്: 5px;
   }

അത് എങ്ങനെ കാണുന്നുവെന്ന് കാണുക