⊗mkSpGfCRa 54 of 128 menu

CSS-da rgba orqali rang berish

rgb formatidan tashqari, shunga o'xshash ishlaydigan, lekin to'rtinchi parametri bilan rangga yarim shaffoflik berish imkoniyatini beruvchi rgba formati mavjud. Ushbu parametr 0 dan 1 gacha bo'lgan kasrli qiymatlarni qabul qiladi. Bunda birlik to'liq shaffofsizlikka, nol esa to'liq shaffoflikka mos keladi.

Keling, misollar orqali ko'rib chiqaylik.

Misol

Boshlanish uchun shunday shaffof bo'lmagan blok yasaymiz:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; padding: 10px; font-size: 50px; font-weight: bold; color: rgba(255, 0, 0); /* qizil rang */ }

:

Misol

Endi matnga yarim shaffoflik qo'shamiz:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; padding: 10px; font-size: 50px; font-weight: bold; color: rgba(255, 0, 0, 0.5); /* qizil yarim shaffof */ }

:

Misol

Endi esa yarim shaffof chegarani yasaymiz:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid rgba(255, 0, 0, 0.5); /* qizil yarim shaffof */ padding: 10px; font-size: 50px; font-weight: bold; color: red; }

:

Misol

Endi esa yarim shaffof fonni yasaymiz:

<div id="parent"> <div id="elem"> Lorem ipsum dolor sit amet. </div> </div> #parent { background-image: url("bg.png"); background-repeat: no-repeat; background-size: cover; display: inline-block; padding: 30px; } #elem { width: 300px; height: 200px; border: 20px solid red; background-color: rgba(0, 0, 0, 0.4); /* qora yarim shaffof */ padding: 10px; font-size: 50px; font-weight: bold; color: red; }

:

Amaliy vazifalar

Abzatslarga qizil yarim shaffof rang bering.

Fonga yashil yarim shaffof rang bering.

Chegaraga havorang yarim shaffof rang bering.

Oʻzbek
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекTiếng Việt
Biz sayt ishlashi, tahlil qilish va shaxsiylashtirish uchun cookie-fayllardan foydalanamiz. Ma'lumotlarni qayta ishlash Maxfiylik siyosatiga muvofiq amalga oshiriladi.
hammasini qabul qilish sozlash rad etish