opacity
Misol
<div> elementi uchun shaffoflik darajasini o‘rnating:
div {
opacity: 0.5;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
opacity xususiyati element uchun shaffoflik (opacity) darajasini o‘rnatadi.
Opacity darajasi shaffoflik darajasini ifodalaydi: 1 — umuman shaffof emas, 0.5 — 50% shaffof, 0 — to‘liq shaffof.
Eslatma: Element foniga shaffoflik qo‘shish uchun opacity xususiyatidan foydalanilganda uning barcha bola elementlari ham shaffof bo‘lib qoladi. Bu to‘liq shaffof element ichidagi matnni o‘qishni qiyinlashtirishi mumkin. Agar shaffoflikni bola elementlarga qo‘llamoqchi bo‘lmasangiz, uning o‘rniga RGBA rang qiymatlaridan foydalaning (quyidagi "Ko‘proq misollar" bo‘limiga qarang).
| Standart qiymat: | 1 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha, alohida xususiyatlarga qarang. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.opacity="0.5" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
CSS sintaksisi
opacity: number|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| number | Shaffoflikni belgilaydi: 0.0 (to‘liq shaffof) dan 1.0 (umuman shaffof emas) gacha | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
opacity xususiyati element foniga va uning barcha bola elementlariga ham shaffoflik qo‘shadi. Bu shaffof element ichidagi matnni o‘qishni qiyinlashtiradi:
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
O‘zingiz sinab ko‘ring »
Misol
Shaffoflikni bola elementlarga qo‘llamaslik uchun (yuqoridagi misoldagi kabi) uning o‘rniga RGBA rang qiymatlaridan foydalaning. Quyidagi misol shaffoflikni matn uchun emas, faqat fon rangi uchun o‘rnatadi:
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80, 0.6);
}
O‘zingiz sinab ko‘ring »
Maslahat: RGBA ranglar haqida CSS RGBA ranglari bo‘limida batafsil o‘rganing.
Misol
JavaScript yordamida element shaffofligini qanday o‘zgartirish mumkin:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS xiralik / shaffoflik (opacity)
CSS darsligi: CSS RGBA ranglari
HTML DOM ma’lumotnomasi: opacity xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!