CSS3 અસ્પષ્ટતા વિશે જાણો

તમારા પૃષ્ઠભૂમિને પારદર્શક બનાવી રહ્યા છે

એક એવી વસ્તુઓમાંથી જે તમે સરળતાથી પ્રિન્ટ ડિઝાઇનમાં કરી શકો છો પરંતુ વેબ પર નથી, છબી અથવા રંગીન પૃષ્ઠભૂમિ પર ઓવરલે ટેક્સ્ટ છે, અને તે છબીની પારદર્શિતાને બદલી દો જેથી ટેક્સ્ટ બેકગ્રાઉન્ડમાં ફેડ થઈ જાય. પરંતુ CSS3 માં કોઈ પ્રોપર્ટી છે જે તમને તમારા ઘટકોની અસ્પષ્ટતા બદલવાની મંજૂરી આપે છે જેથી તેઓ ઝાંખા અને ઝાંખુ થઈ જાય: અસ્પષ્ટતા

અસ્પષ્ટતા સંપત્તિ કેવી રીતે વાપરવી

અસ્પષ્ટ મિલકત 0.0 થી 1.0 ની પારદર્શિતાના મૂલ્યની કિંમત લે છે.

0.0 એ 100% પારદર્શક છે- તે તત્વ નીચેની કોઈપણ વસ્તુ સંપૂર્ણ રીતે બતાવશે. 1.0 એ 100% અપારદર્શક છે- તત્વ નીચે કશું નીચે દેખાશે નહીં.

તેથી તત્વને 50% પારદર્શક બનાવવા માટે, તમે લખશો:

અસ્પષ્ટતા: 0.5;

ક્રિયામાં અસ્પષ્ટતાના કેટલાક ઉદાહરણો જુઓ

જૂનાં બ્રાઉઝર્સમાં ચકાસવા માટે ખાતરી કરો

ન તો IE 6 કે 7 એ CSS3 અસ્પષ્ટ મિલકતને સપોર્ટ કરે છે. પરંતુ તમે નસીબ બહાર નથી. તેના બદલે, IE એ Microsoft- નો એકમાત્ર પ્રોપર્ટી આલ્ફા ફિલ્ટરનું સમર્થન કરે છે. IE માં આલ્ફા ગાળકો 0 (સંપૂર્ણપણે પારદર્શક) થી 100 (સંપૂર્ણપણે અપારદર્શક) માંથી મૂલ્યો સ્વીકારે છે. તેથી, IE માં તમારી પારદર્શકતા મેળવવા માટે, તમારે 100 દ્વારા તમારા અસ્પષ્ટને ગુણાકાર કરવો જોઈએ અને તમારી શૈલીઓ માટે એક આલ્ફા ફિલ્ટર ઉમેરો.

ફિલ્ટર: આલ્ફા (અસ્પષ્ટતા = 50);

ક્રિયામાં આલ્ફા ફિલ્ટર જુઓ (ફક્ત IE)

અને બ્રાઉઝર ઉપસર્ગોનો ઉપયોગ કરો

તમારે મોઝિલ્લા અને વેબકિટ- ઉપસર્ગોનો ઉપયોગ કરવો જોઈએ જેથી મોઝિલા અને વેબકૅટ બ્રાઉઝરના જૂના સંસ્કરણો તેને સમર્થન આપે છે:

-વેબકીટ-અસ્પષ્ટતા: 0.5;
-મોઝ-અસ્પષ્ટતા: 0.5;
અસ્પષ્ટતા: 0.5;

હંમેશાં પહેલા બ્રાઉઝર ઉપસર્ગો મૂકો, અને માન્ય CSS3 ગુણધર્મ છેલ્લા.

જૂના મોઝિલા અને વેબકિટ બ્રાઉઝર્સમાં બ્રાઉઝર ઉપસર્ગો પરીક્ષણ કરો.

તમે છબીઓ પારદર્શક બનાવી શકો છો

છબી પર અસ્પષ્ટને સેટ કરો અને તે પૃષ્ઠભૂમિમાં ઝાંખા કરશે. આ પૃષ્ઠભૂમિ છબીઓ માટે ખરેખર ઉપયોગી છે.

અને જો તમે એન્કર ટેગમાં ઍડ કરો છો, તો તમે છબીની અસ્પષ્ટતાને બદલીને હોવર અસરો બનાવી શકો છો.

એક: હોવર img {
ફિલ્ટર: આલ્ફા (અસ્પષ્ટતા = 50)
ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.Alpha (અસ્પષ્ટતા = 50)
-મોઝ-અસ્પષ્ટતા: 0.5;
-વેબકીટ-અસ્પષ્ટતા: 0.5;
અસ્પષ્ટતા: 0.5;
}

આ HTML પર અસર કરે છે:

ઉપરનાં શૈલીઓ અને ક્રિયામાં HTML ચકાસો.

તમારી છબીઓ પર લખાણ મૂકો

અસ્પષ્ટતા સાથે, તમે છબી પર ટેક્સ્ટ મૂકી શકો છો અને જ્યાં તે ટેક્સ્ટ છે ત્યાં છબીને ઝાંખા પડતી દેખાય છે.

આ ટેકનીક થોડું મુશ્કેલ છે, કારણ કે તમે ફક્ત છબીને ઝાંખા નહીં કરી શકો છો, કારણ કે તે સંપૂર્ણ છબીને ઝાંખા કરશે. અને તમે ટેક્સ્ટ બૉક્સમાં ઝાંખા નહીં કરી શકો છો, કારણ કે લખાણ ત્યાં પણ ઝાંખા કરશે.

1. પહેલાં તમે કન્ટેનર ડીવીવી બનાવો અને તમારી છબીને અંદર મૂકો:

   
   

2. ખાલી DIV સાથેની છબીને અનુસરો- આ તે છે જે તમે પારદર્શક બનાવશો.

   
   
   

3. તમે તમારા એચટીએમએલમાં ઍડ કરેલી છેલ્લી વસ્તુ તેમાં તમારા ટેક્સ્ટ સાથે DIV છે.

   
   
   
   આ મારો ડોગ શાસ્તા છે તે સુંદર નથી!

4. તમે છબીની ઉપરના ટેક્સ્ટને મૂકવા માટે, તેને CSS પૉઝીંગિંગ સાથે સ્ટાઇલ કરો છો. મેં મારા ટેક્સ્ટને ડાબી બાજુએ મૂકી દીધો, પરંતુ તમે તેને ડાબી બાજુએ બદલીને તેને જમણી બાજુ પર મૂકી શકો છો: 0; જમણે ગુણધર્મો: 0; .

   #image {
   સ્થિતિ: સંબંધિત;
   પહોળાઈ: 170 પીએક્સ;
   ઊંચાઈ: 128 પીએક્સ;
   હાંસિયો: 0;
   }
   #text {
   સ્થિતિ: નિરપેક્ષ;
   ટોચ: 0;
   ડાબી: 0;
   પહોળાઈ: 60px;
   ઊંચાઈ: 118px;
   પૃષ્ઠભૂમિ: #fff;
   ગાદી: 5 પીએક્સ;
   }
   #text {
   ફિલ્ટર: આલ્ફા (અસ્પષ્ટતા = 70);
   ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.Alpha (અસ્પષ્ટતા = 70);
   -મોઝ-અસ્પષ્ટતા: 0.70;
   અસ્પષ્ટતા: 0.7;
   }
   #words {
   સ્થિતિ: નિરપેક્ષ;
   ટોચ: 0;
   ડાબી: 0;
   પહોળાઈ: 60px;
   ઊંચાઈ: 118px;
   પૃષ્ઠભૂમિ: પારદર્શક;
   ગાદી: 5 પીએક્સ;
   }

જુઓ તે કેવી રીતે જુએ છે