CSS transparan latar mburi. latar mburi Transparent utawa teks karo CSS

Kanthi tekane saka CSS3 web perancang bisa nganggo cara akeh wis dadi luwih gampang lan luwih nalar: sawise kabeh, sampeyan bisa saiki pancene flexibly ngatur obyek wae, kurang seneng resorting kanggo JavaScript. Ayo dadi ngomong sampeyan kudu nyetel transparan latar mburi - CSS langsung nawakake sawetara opsi.

Latar mburi ditetepake dening pesawat saka kawicaksanan (latar mburi-gambar, latar mburi-posisi , latar mburi-ukuran, latar mburi-baleni, latar mburi-lampiran, latar mburi-asal, latar mburi-clip, latar mburi-werna), saben kang bisa diutus dhewe utawa dikombinasikaké ing ngubungake ing latar mburi. Ayo padha nliti saben wong ing rinci.

Ngubungake latar mburi-werna

Ing CSS, werna latar mburi bisa diset ing sawetara cara: nggunakake kode hex, jeneng werna utawa RGB-entri. Ing CSS3 iku dadi bisa nggunakake tinimbang pilihan RGB-rekaman karo RGBA.

kode werna Hex direkam ing bisa sawise pola Latar-werna: # FFDAB9. Yen karakter ing entri iki sing pasangan padha, kode biasane Cut sethitik: # ccff00 bisa ditulis minangka # cf0:

awak {latar mburi-werna: # cf0 ;}.

Jeneng iku, malah ing werna paling endah. Contone, saliyane kanggo abang standar lan putih sampeyan bisa nggunakake NavajoWhite (#FFDEAD) utawa Honeydew2 (# E0EEE0):

awak {latar mburi-werna: kain; }.

Pilihan terakhir iku RGB utawa RGBA entri ngijini sampeyan kanggo nemtokake ora mung werna nanging uga ing transparan latar mburi CSS, nanging cara dianggo mung ing versi IE lawas saka 9. browser liyane ngenali versi normal karo transparan. Miturut standar W3C iku becike nggunakake isih RGBA tinimbang RGB liyane biasanipun.

Nilai pungkasan ing latar mburi RGBA lan mranata ing opacity saka 0 (transparan) kanggo 1 (opaque).

Ana sawetara nilai mboten umum. Werna latar mburi bisa nyetel nggunakake HSL lan HSLA. Loro-lorone padha ditambahake kanggo CSS3, lan mulane ora didhukung dening IE versi 9 utawa luwih. Embodiments RGB memper utawa RGBA, mung ing format ingkang bènten: Hue (iyub-iyub - nilai ing setir werna, diwenehi ing derajat), saturate (intensitas - kakiyatan werna minangka persentasi, saka 0 kanggo 100), terang (raosipun - padhange, diukur Kajaba parameter saturate ).

Ngubungake latar mburi-gambar

Paling versi salib-browser saka latar mburi transparent - iki nggunakake gambar. Ing CSS3, sampeyan bisa nyetel malah luwih images, iki wis rampung liwat koma. contone:

{Gambar latar mburi-awak: url (bg1.png), url (bg2.png)}.

Iki cara ndhukung malah IE8. Sawetara gambar ing latar mburi saka karet digunakake ing tata letak. Jahwéh, ora lali kanggo nggunakake gambar lan nyetel werna latar mburi ing CSS, minangka pangguna mung bisa ngunggah gambar.

Ngubungake latar mburi-posisi

Yen sampeyan nggunakake gambar kanggo nyetel unit latar mburi, CSS ngijini sampeyan kanggo posisi gambar ing ngendi wae ing Layar. Kanthi gawan, gambar dumunung ing sudhut kiwa ndhuwur. Atribut njupuk salah siji instruksi langsung (ndhuwur, ngisor, ngiwa, nengen), a angka (kapentingan, piksel lan Unit liyane). Ing kasus iki, sampeyan kudu nemtokake loro nilai, horisontal lan vertikal:

awak {latar mburi-posisi: tengah tengen ;} - ing conto iki, pola bakal dumunung ing sisih tengen kaca, ing ndhuwur lan ngisor gambar kadohan kanggo padha.

Ngubungake latar mburi-ukuran

Kadang iku perlu kanggo babagan latar mburi CSS utawa nyuda ukuran. Kanggo nindakake iki, nggunakake ngubungake latar mburi-ukuran, lan ukuran latar mburi bisa diset ing piksel utawa persentase, lan sembarang Unit liyane.

Kanthi ngubungake iki, ana sawetara masalah: kanggo tampilan sing bener saka latar mburi ing versi sadurungé saka Préfiks browser kanggo digunakake. Mesthi, versi saiki kebak ndhukung ngubungake iki lan perlu kanggo situs tartamtu ilang.

Ngubungake latar mburi-lampiran

ngubungake iki nemtokaken prilaku saka gambar latar mburi nalika nggulung. Dadi, bisa njupuk 3 nilai (ora kalebu tampa panduman, total kanggo kabeh kawicaksanan bakal diwedharaké ing artikel iki):

• tetep - ndadekake Gambar ing latar mburi tetep;
• gulung - gulungan latar mburi karo liyane saka unsur;
• lokal - gambar ing latar mburi wis scrolled yen gulung wis isi. Latar mburi sing dadi ngluwihi isi pigura wis telpon.

Conto panggunaan:

awak {latar mburi-lampiran tetep}.

Saiki, Firefox ora ndhukung properti pungkasan (lokal).

Ngubungake latar mburi-asal

ngubungake iki tanggung jawab kanggo unsur posisi. browser awal mbutuhake Préfiks. Properti dhewe wis telung paramèter:

• lapis-kothak dipanggonke relatif kanggo pola pinggiran, nalika njupuk menyang akun kekandelan saka pigura;
• wewatesan-kothak beda saka sadurungé ing baris wates bisa dadi rampung utawa sebagian tumpang tindih pola;
• isi-kothak posisi gambar pryavyazyvaya isine.

Yen sampeyan nemtokake macem-macem nilai, banjur browser bisa nanggepi ing cara dhewe: Firefox lan Opera ndelok mung pilihan pisanan.

Ngubungake latar mburi-baleni

Minangka aturan, yen gambar latar mburi kasebut, iku kudu bola horisontal utawa vertikal. Kanggo iki lan digunakake ing ngubungake latar mburi-baleni. Mangkono, pemblokiran latar mburi, CSS kang ngandhut property kuwi bisa duwe siji saka sawetara paramèter:

• ora-baleni - gambar katon ing kaca ing versi siji;
• mbaleni - latar mburi wis makaping-kaping ing x lan y;
• mbaleni-x - mung horisontal;
• mbaleni-y - mung vertikal;
• papan - latar mburi wis bola, nanging yen papan iku mokal kanggo isi ing antarane gambar katon kosong;
• babak - gambar scaled, yen ora isi kabeh wilayah saka kabèh gambar.

Conto saka kawicaksanan:

awak {latar mburi-baleni: no- baleni baleni} - padha latar mburi-baleni: mbaleni-y.

Ing CSS3 bisa nemtokake nilai kanggo macem-macem gambar nalika listing paramèter, dipisahake dening koma.

Ngubungake latar mburi-clip

ngubungake iki nemtokake tumindaké latar mburi ing wates (contone, ing cilik saka pigura burik):

• lapis-kothak - latar mburi katampil ing interior pemblokiran;
• wewatesan-kothak - gambar rawuh ing framework;
• isi-kothak - gambar ing latar mburi mung bakal katon ing isi ing.

Conto panggunaan:

awak {latar mburi-clip: isi- kothak;}.

Chrom lan Safari mbutuhake ater-ater -webkit-.

kawicaksanan Opacity lan Filter

ngubungake opacity ngijini sampeyan kanggo nyetel transparan latar mburi - properti CSS bisa ing kabeh browser. Nilai disetel ing sawetara saka 0.0 kanggo 1.0 klebu. Ing kasus iki, sampeyan bisa nyetel transparan latar mburi CSS ora Nilai ongko tinimbang 0.3 cukup kanggo nulis .3:

.block {latar mburi-gambar: url ( img.png Jenis); opacity: .3;}.

Nyetel opacity latar mburi, CSS cocok malah kanggo IE ngisor versi kasanga, nggunakake ngubungake Filter:

.block {latar mburi-gambar: url ( img.png Jenis); Filter: alpha (opacity = 30)}.

Ing kasus iki, nilai opacity disetel antara 0 lan 100. Elinga yen opacity ngubungake setelan transparan beda liwat pusaka RGBA: nalika nggunakake opacity dadi cetha ora mung latar mburi, nanging uga kabeh unsur nang unit.

Tansah ngawasi statistik panggunaan kanggo browser CIS lan kabeh negara liyane. Masalah paling gedhe kabeh DTP - versi lawas saka IE, padha ora ngijini sampeyan kanggo nggunakake ombone CSS3 lengkap. Ing tata ora lali kanggo nggunakake layanan khusus sing mriksa apa browser ndhukung sembarang property CSS. Yen sampeyan ora bisa nginstal versi lawas saka browser, golek layanan sing bakal mriksa karya situs ing sawetara browser online.