Orqa fon lavhasini oshkora qilish
Bosib chiqarish vositasida osongina bajarishingiz mumkin bo'lgan narsalardan biri Internetda emas, balki tasvir yoki rangli fonda matnni joylashtirish va matnning orqa fonga aylanishi uchun ushbu tasvirning shaffofligini o'zgartiradi. Ammo CSS3-da sizning elementlaringizning shaffofligini o'zgartirishga imkon beradigan xususiyat mavjud: ular shaffoflikda.
Opaksizlikni qanday ishlatish kerak
Shaffoflik xususiyati shaffoflik miqdorini 0.0 dan 1.0 gacha oladi.
0.0 bu 100% shaffof - ushbu elementning pastki qismida butunlay paydo bo'ladi. 1.0 - elementning pastki qismida 100% opak - hech narsa ko'rinmaydi.
Shunday qilib, elementni 50% ochiq qoldirish uchun quyidagilarni yozishingiz mumkin:
shaffoflik: 0,5;
Faoliyatdagi ba'zi bir misollarni ko'rib chiqing
Eski brauzerlarda sinovdan o'ting
IE 6 yoki 7 da CSS3 opacity xususiyatini qo'llab-quvvatlamaydi. Lekin siz omadsiz emassiz. Buning o'rniga, IE faqat Microsoft xususiyatidagi alfa-filtrini qo'llab-quvvatlaydi. IEdagi alfa filtrlari 0 dan (butunlay shaffof) 100 gacha (to'liq shaffof) qiymatlarni qabul qiladi. Shunday qilib, IE-da shaffofligingizni oshirish uchun siz o'zingizning opaklığınızı 100 barobar oshirishingiz va jihozlaringizga alfa-filtri qo'shishingiz kerak:
filtri: alfa (opacity = 50);
Amaldagi alfa filtriga qarang (faqat IE)
Va brauzer prefikslaridan foydalaning
Mozilla va Webkit brauzerlarining eski versiyalari uni qo'llab-quvvatlaydigan qilib -moz va -webkit-prefikslardan foydalanishi kerak:
-webkit-opacity: 0,5;
-moz-shaffoflik: 0,5;
shaffoflik: 0,5;
Har doim brauzer prefikslarini avval joylashtiring va joriy CSS3 xususiyatini kiriting.
Mozilla va Webkit brauzerlarida brauzer prefikslarini sinab ko'ring.
Siz shaffof rasmlarni yaratishingiz mumkin
Tasvirning o'zida opaklikni o'rnating va u fonga tushadi. Bu, fon tasvirlari uchun juda foydali.
Va agar siz ankraj yorlig'i qo'shsangiz, vahiyning shaffofligini o'zgartirib, hover effektlarini yaratishingiz mumkin.
a: hover img {
filtri: alfa (opacity = 50)
Filtr: prod.: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-shaffoflik: 0,5;
-webkit-opacity: 0,5;
shaffoflik: 0,5;
}
Ushbu HTMLga ta'sir qil:
Yuqoridagi uslublarni va HTMLni harakatda sinab ko'ring.
Rasmlarga matn qo'ying
Shaffoflik bilan tasvirni matnga joylashtirishingiz mumkin va bu matn qaerda bo'lsa, rasm o'chib ketishi mumkin.
Bu usul biroz qiyin, chunki siz oddiygina tasvirni yo'q qila olmaysiz, chunki bu butun tasvirni yo'qotadi. Va siz matn qutisini o'chira olmaysiz, chunki matn ham u erda pasayib ketadi.
- Avval DIV konteynerini yaratasiz va rasmingizni ichingizga qo'yasiz:
- Tasvirni bo'sh DIV bilan kuzatib boring - bu sizning oshkora qiladigan narsa.
- Siz HTML-ga kiritgan oxirgi narsa sizning matningizdagi DIV'dir:
Bu mening itim Shasta. U yoqimli emasmi? - Siz uni CSS joylashuvi bilan bezatib, matnni tasvir ustida joylashtirishingiz mumkin. Men matnni chap tomonga qo'ydim, lekin o'ng tomonga ikkita chapni o'zgartirib qo'yishingiz mumkin: 0; xususiyatlar: 0; .
#image {
Lavozim: nisbiy;
kenglik: 170px;
balandligi: 128px;
margin: 0;
}
#text {
Lavozim: mutlaq;
tepada: 0;
chap: 0;
kenglik: 60px;
balandligi: 118px;
fon: #fff;
to'ldirish: 5px;
}
#text {
filtri: alfa (opacity = 70);
filtri: prodid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-shaffoflik: 0.70;
shaffoflik: 0,7;
}
#words {
Lavozim: mutlaq;
tepada: 0;
chap: 0;
kenglik: 60px;
balandligi: 118px;
fon: shaffof;
to'ldirish: 5px;
}
U qanday ko'rinishini ko'ring