CSS transparansi latar. tukang transparan atawa téks kalawan CSS

Ku mecenghulna CSS3 web désainer dianggo ku sababaraha cara geus jadi gampang sarta leuwih logis: sanggeus kabeh, ayeuna bisa bener flexibly ngaropea obyék wae, kirang remen resorting mun JavaScript. Hayu urang nyebutkeun kudu ngaluyukeun transparansi sahiji tukang - CSS geuwat nawarkeun sababaraha pilihan.

Tukang tangtu ku susunan atribut (tukang-gambar, latar-posisi , latar-ukuran, latar-ulang, latar-kantétan, latar-usul, latar-klip, latar-warna), nu masing-masing bisa ditugaskeun misah atawa digabungkeun dina atribut éta latar. Hayu urang nalungtik unggal sahijina di jéntré.

Atribut tukang-warna

Dina CSS, warna latar bisa disetél dina sababaraha cara: maké kode hex, ngaran warna atawa RGB-éntri. Dina CSS3 eta janten kamungkinan ngagunakeun tinimbang pilihan RGB-rekaman kalayan RGBA.

Kode Warna Hex dirékam dina sipat sanggeus kisi teh: tukang-warna: # FFDAB9. Mun karakter dina entri ieu téh pasangan sarua, kode biasana mangrupa cut saeutik: # ccff00 bisa ditulis salaku # cf0:

awakna {tukang-warna: # cf0 ;}.

Ngaranna, sanajan dina kelir paling aheng. Contona, sajaba beureum baku bodas anjeun tiasa nganggo NavajoWhite (#FFDEAD) atanapi Honeydew2 (# E0EEE0):

awakna {tukang-warna: ungu; }.

Pilihan dimungkinkeun aya RGB atanapi RGBA Éntri ngidinan Anjeun pikeun nangtukeun moal ngan warna tapi ogé transparansi sahiji tukang CSS, tapi métode gawéna ngan dina versi IE heubeul ti 9. panyungsi lianna ngakuan versi normal mibanda transparansi. Numutkeun standar W3C éta leuwih hade migunakeun masih RGBA gaganti RGB langkung biasa.

Nilai panungtungan di tukang RGBA sarta susunan nu opacity ti 0 (transparan) ka 1 (opak).

Aya sababaraha nilai mahiwal. Warna tukang bisa diatur ngagunakeun HSL jeung HSLA. Duanana anu ditambahkeun kana CSS3, sarta ku kituna teu dirojong ku IE Vérsi 9 atawa saluhureuna. Embodiments RGB idéntik atanapi RGBA, ngan dina format béda: hue (ngiuhan - nilai dina kabayang warna, dirumuskeun dina derajat), Saturate (jenuh - inténsitas warna sakumaha perséntase, ti 0 nepi ka 100), Lightness (lightness - kacaangan, nu diukur parameter sarupa Saturate ).

Atribut tukang-gambar

Paling Vérsi cross-browser sahiji tukang transparan - ieu téh pamakéan gambar. Dina CSS3, Anjeun tiasa nyetel malah leuwih gambar, ieu dipigawé ngaliwatan koma. contona:

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

Ieu cara ngarojong malah IE8. Sababaraha gambar di tukang tina karét dipaké dina perenah ti. Importantly, ulah poho ngagunakeun gambar naon tur nyetel warna latar dina CSS, sakumaha pamaké saukur tiasa unggah hiji gambar.

Atribut tukang-posisi

Lamun make gambar ka ngeset Unit kasang tukang, CSS ngidinan Anjeun pikeun posisi gambar mana dina layar. Sacara standar, gambar ieu lokasina di belah kénca juru luhur. Atribut nyokot boh parentah verbal (luhur, handap, ka kénca, ka katuhu), anu numeris (interest, piksel jeung unit séjén). Dina hal ieu, anjeun kudu nangtukeun dua nilai, horizontal sarta nangtung:

awakna {tukang-posisi: puseur katuhu ;} - dina conto ieu, pola bakal ditempatkeun di sisi katuhu tina kaca, luhureun na handap gambar jarak ka sami.

Atribut tukang-ukuran

Kadangkala kacida perlu manteng tukang CSS atawa ngurangan ukuranana na. Jang ngalampahkeun ieu, nganggo atribut tukang-ukuran, sarta ukuran tina tukang bisa disetél dina piksel atanapi percentages, sarta sagala unit séjén.

Kalawan atribut ieu, aya sababaraha masalah: pikeun tampilan bener tina latar dina versi samemehna nu émbohan browser pikeun dipaké. Tangtu, versi ayeuna pinuh ngarojong atribut ieu sareng kabutuhan pasipatan husus ngiles.

Atribut tukang-kantétan

atribut Ieu hususna paripolah gambar tukang bari ngagulung. Ku kituna, éta bisa nyandak 3 nilai (teu kaasup inherit, anu total pikeun sakabéh tina atribut dibahas dina artikel ieu):

• tetep - ngajadikeun gambar dina latar tukang dibereskeun;
• ngagulung - scrolls tukang kalawan sesa elemen;
• lokal - gambar di tukang keur scrolled lamun ngagulung boga eusi. Latar nu mana saluareun eusi pigura geus dibereskeun.

Conto pamakéan:

awakna {tukang-kantétan dibereskeun}.

Ayeuna, Firefox teu ngarojong harta panungtungan (lokal).

Atribut tukang-usul

atribut Ieu jawab unsur positioning. panyungsi mimiti merlukeun pamakean émbohan. Harta sorangan boga tilu parameter:

• padding-kotak anu diposisikan relatif ka pola ujung, bari nyokot kana akun ketebalan pigura;
• Wates-kotak sipat béda ti saméméhna di yén garis wates tiasa sagemblengna atawa sawaréh tumpang tindih pola;
• eusi-kotak positioning gambar pryavyazyvaya eusina.

Lamun nangtukeun sababaraha nilai, teras panyungsi bisa meta di jalan sorangan: Firefox sarta Opera ngarasa ngan pilihan kahiji.

Atribut tukang-ulang

Sakumaha aturan, upami gambar latar geus dieusian, éta kudu terus-terusan horisontal atawa vertikal. Pikeun ieu sareng dipaké dina atribut tukang-ulang. Ku kituna, blok kasang tukang, CSS nu ngandung sipat saperti tiasa gaduh salah sahiji sababaraha parameter:

• no-ulang - gambar mucunghul dina kaca dina versi tunggal;
• ngulang - tukang diulang dina x jeung y;
• ngulang-x - hijina horisontal;
• ngulang-y - hijina vertikal;
• spasi - tukang diulang, tapi lamun spasi mustahil pikeun eusian antara gambar némbongan kosong;
• babak - gambar ieu diskalakeun, upami teu eusian sakabéh wewengkon sakabeh gambar.

Conto tina atribut:

awakna {tukang-ulang: no- ulang ulang} - sarupa tukang-ulang: ngulang-y.

Dina CSS3 bisa nangtukeun nilai keur sababaraha gambar nalika Listing parameter, dipisahkeun ku koma.

Atribut tukang-klip

atribut Ieu ngahartikeun paripolah tukang di handapeun wates (e.g., dina kasus pigura dotted):

• padding-kotak - tukang ditingal dina pedalaman blok;
• Wates-kotak - gambar asalna dina kerangka;
• eusi-kotak - gambar di tukang ngan bakal muncul dina eusi.

Conto pamakéan:

awakna {tukang-klip: content- kotak;}.

Chrom jeung Safari merlukeun awalan -webkit-.

atribut Opacity na filter

atribut opacity ngidinan Anjeun pikeun nangtukeun transparansi sahiji tukang - sipat CSS bakal dianggo dina sakabéh panyungsi. nilai tos disetel di rentang ti 0,0 nepi 1.0 inklusif. Dina hal ieu, anjeun tiasa nyetél transparansi sahiji tukang CSS euweuh nilai integer tinimbang 0,3 cukup nulis .3:

.block {tukang-gambar: url ( img.png); opacity: .3;}.

Nyetel opacity kasang tukang, CSS anu merenah malah keur IE handap versi kasalapan, nganggo atribut filter:

.block {tukang-gambar: url ( img.png); filter: alfa (opacity = 30)}.

Dina hal ieu, anu nilai opacity diatur antara 0 jeung 100. Catetan yen opacity nu atribut setélan transparansi béda via warisan RGBA: lamun ngagunakeun opacity janten jelas teu ukur tukang, tapi ogé sagala elemen jero unit.

Salawasna ngawas statistik pamakéan anjeun panyungsi CIS sarta sakabeh nagara séjén. Masalah pangbadagna sadaya DTP - versi heubeul tina IE, aranjeunna teu ngidinan Anjeun pikeun nganggo extent CSS3 pinuh. Dina perenah ulah poho pikeun nganggo layanan husus nu parios naha panyungsi anjeun ngarojong sagala harta CSS. Lamun teu tiasa install versi heubeul tina panyungsi, manggihan layanan anu bakal pariksa karya situs di sababaraha panyungsi online.