Arxa planlarınızı şəffaf etmək
Yazı dizaynında asanlıqla edə biləcəyiniz şeylərdən biri də internetdə deyil, bir şəkil üzərində və ya rəngli fonda mətnin üstünə yerləşdirilir və mətn arxa planda qalıb ki, həmin görüntünün şəffaflığını dəyişdirir. Lakin CSS3-də bir xüsusiyyət var ki, elementlərinizin qeyri-şəffaflığını dəyişdirməyinizə imkan verəcəkdir: beləliklə, qeyri-şəffaflıq.
Şəffaflıqdan necə istifadə etməli?
Bu qeyri-şəffaflıq obyekti 0.0-dən 1.0-ə qədər şəffaflıq məbləğinin dəyərini alır.
0.0, 100% şəffafdır - bu elementin altından bir şey tamamilə görünəcəkdir. 1.0, elementin aşağıda göstərilən 100% qeyri-şəffaf hissəsidir.
Beləliklə, elementi 50% şəffaflaşdırmaq üçün yazmaq olar:
şəffaflıq: 0.5;
Fəaliyyətdə qeyri-şəffaflıq nümunələrinə baxın
Daha Köhnə Brauzerlərdə Test Edilməyinə əmin olun
Ne IE 6, nə də 7 CSS3 opacity xüsusiyyətini dəstəkləyir. Ancaq şansınız yox. Bunun əvəzinə, IE Microsoft yalnız əmlak alfa filtrini dəstəkləyir. IE-də alfa filtrləri 0 (tamamilə şəffaf) dan 100 (tamamilə qeyri-şəffaf) dəyərləri qəbul edir. Beləliklə, IE-də şəffaflığınızı əldə etmək üçün, 100-dən çox qeyri-şəffaflığınızı artırmalı və üslublarınıza bir alfa filtr əlavə etməlisiniz:
filter: alfa (opacity = 50);
Əməliyyatda alfa filtrinə baxın (yalnız IE)
Və Browser Prefixes istifadə edin
Mozilla və Webkit brauzerlərinin köhnə versiyaları da bunu dəstəkləyəcək şəkildə -moz- və -webkit-prefikslərindən istifadə etməlisiniz:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
şəffaflıq: 0.5;
Həmişə brauzerinizin prefikslərini ilk dəfə yerləşdirin və cari CSS3 xüsusiyyətini son qoyun.
Köhnə Mozilla və Webkit brauzerlərindəki brauzer prefikslərini test edin.
Şəkillərə Şəffaflıq edə bilərsiniz
Görünüşün üzərindəki qeyri-şəffaflığı seçin və arxa planda qalacaq. Bu, fon şəkilləri üçün həqiqətən faydalıdır.
Və bir çapa etiket əlavə etsəniz, yalnız görüntünün qeyri-şəffaflığını dəyişərək hover effektləri yarada bilərsiniz.
a: hover img {
filter: alfa (opacity = 50)
filtre: prodüksiyon: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
şəffaflıq: 0.5;
}
Bu HTML-ə təsir:
Yuxarıdakı üslubları və HTML-lərdə test edin.
Şəkillərinizə mətn qoyun
Şəffaflıqla, bir mətn üzərində mətn yerləşdirə bilərsiniz və mətnin olduğu yerdə görünüşün söndüyü görünür.
Bu texnika bir az çətindir, çünki sadəcə təsviri düzəldə bilməz, çünki bütün görünüşü söndürəcək. Və mətn qutusunu sola bilməzsiniz, çünki mətn də orada qalacaq.
- Əvvəl bir konteyner DIV yaratmaq və şəkilləri daxilində yerləşdirin:
- Boş bir DIV ilə təsvir edin - bu, şəffaf olmağınızdır.
- HTML-də əlavə etdiyiniz son məqam sizin mətninizlə DIVdir:
Bu mənim it Shasta. O gözəl deyil mi? - Siz CSS-də yerləşdirmə ilə tərtib edir, mətnin yuxarı hissəsini yerləşdirmək üçün. Mətnimi sol tərəfə yerləşdirdim, ancaq iki solun dəyişdirilməsi ilə onu sağ tərəfə qoyursunuz: 0; xüsusiyyətləri sağa: 0; .
#image {
mövqe: nisbi;
eni: 170px;
boy: 128px;
margin: 0;
}
#text {
mövqe: mütləq;
üst: 0;
sol: 0;
eni: 60px;
boy: 118px;
fon: # ff;
padding: 5px;
}
#text {
filter: alfa (opacity = 70);
filter: prod.: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-şəffaflıq: 0.70;
şəffaflıq: 0,7;
}
#words {
mövqe: mütləq;
üst: 0;
sol: 0;
eni: 60px;
boy: 118px;
fon: şəffaf;
padding: 5px;
}
Göründüyü kimi baxın