Membuat Latar Belakang Anda Telus
Salah satu perkara yang boleh anda lakukan dengan mudah dalam reka bentuk cetakan tetapi tidak di Web ialah teks overlay pada imej atau latar belakang berwarna, dan menukar ketelusan imej itu supaya teks memudar ke latar belakang. Tetapi ada satu sifat dalam CSS3 yang akan membolehkan anda menukar kelegapan unsur-unsur anda supaya mereka pudar masuk dan keluar: kelegapan.
Bagaimana Menggunakan Harta Opacity
Harta opacity mengambil nilai jumlah ketelusan dari 0.0 hingga 1.0.
0.0 adalah 100% telus-apa-apa di bawah elemen yang akan ditunjukkan sepenuhnya. 1.0 adalah 100% opaque-tiada apa-apa di bawah elemen yang akan ditunjukkan.
Jadi untuk menetapkan elemen hingga 50% telus, anda akan menulis:
kelegapan: 0.5;
Lihat beberapa contoh kelegapan dalam tindakan
Pasti Uji di Pelayar Lama
Sama ada IE 6 atau 7 menyokong sifat opacity CSS3. Tetapi anda tidak beruntung. Sebaliknya, IE menyokong penapis alfa harta milik Microsoft sahaja. Penapis Alpha di IE menerima nilai dari 0 (sepenuhnya telus) hingga 100 (benar-benar legap). Oleh itu, untuk mendapatkan ketelusan anda dalam IE, anda harus mengalikan kelegapan anda dengan 100 dan menambah penapis alpha kepada gaya anda:
penapis: alpha (opacity = 50);
Lihat penapis alfa dalam tindakan (hanya IE)
Dan Gunakan Awalan Pelayar
Anda harus menggunakan awalan -moz- dan -webkit supaya versi lama penyemak imbas Mozilla dan Webkit juga menyokongnya:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
kelegapan: 0.5;
Sentiasa letakkan awalan penyemak imbas terlebih dahulu, dan sifat CSS3 yang sah terakhir.
Uji awalan pelayar pada pelayar Mozilla dan Webkit yang lebih lama.
Anda Boleh Buat Imej Transparent Too
Tetapkan kelegapan pada imej itu sendiri dan ia akan memudar ke latar belakang. Ini sangat berguna untuk imej latar belakang .
Dan jika anda menambah tag anchor, anda boleh membuat kesan hover hanya dengan menukar kelegapan imej.
a: hover img {
penapis: alpha (opacity = 50)
penapis: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
kelegapan: 0.5;
}
Mempengaruhi HTML ini:
Uji gaya di atas dan HTML dalam tindakan.
Letakkan Teks pada Imej Anda
Dengan kelegapan, anda boleh meletakkan teks di atas imej dan mempunyai imej yang muncul untuk memudar di mana teks itu.
Teknik ini agak rumit, kerana anda tidak boleh sekadar memudar imej, kerana itu akan memudar keseluruhan imej. Dan anda tidak boleh memudar kotak teks , kerana teks itu akan memudar di sana juga.
- Pertama anda mencipta DIV bekas dan letakkan imej anda di dalam:
- Ikut imej dengan DIV kosong - inilah yang akan anda telus.
- Perkara terakhir yang anda tambahkan dalam HTML anda adalah DIV dengan teks anda di dalamnya:
Ini adalah anjing saya Shasta. Bukan dia comel! - Anda gaya dengan kedudukan CSS, untuk meletakkan teks di atas imej. Saya meletakkan teks saya di sebelah kiri, tetapi anda boleh meletakkannya di sebelah kanan dengan menukar dua kiri: 0; hartanah ke kanan: 0; .
#gambar {
kedudukan: saudara;
lebar: 170px;
ketinggian: 128px;
margin: 0;
}
#text {
kedudukan: mutlak;
atas: 0;
kiri: 0;
lebar: 60px;
ketinggian: 118px;
latar belakang: #fff;
padding: 5px;
}
#text {
penapis: alpha (opacity = 70);
penapis: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
-moz-opacity: 0.70;
kelegapan: 0.7;
}
#words {
kedudukan: mutlak;
atas: 0;
kiri: 0;
lebar: 60px;
ketinggian: 118px;
latar belakang: telus;
padding: 5px;
}
Lihat bagaimana rupanya