CSS background transparency. Transparent na background o teksto sa CSS

Gamit ang pagdating ng CSS3 web designers trabaho sa maraming paraan ay naging mas madali at mas lohikal na: matapos ang lahat, maaari mo na ngayong talagang flexibly-customize ang anumang bagay, hindi gaanong madalas resorting sa JavaScript. Sabihin natin na kailangan mo upang ayusin ang transparency ng background - CSS agad na nag-aalok ng ilang mga pagpipilian.

Background na tinukoy sa pamamagitan ng isang hanay ng mga katangian (background-image, background-posisyon , background-size, background-umuulit, background-attachment, background-pinagmulan, background-clip, background-color), ang bawat isa ay maaaring italaga nang hiwalay o pinagsama sa ilalim ng attribute background. Suriin natin ang bawat isa sa kanila nang detalyado.

Katangian ng background-color

Sa CSS, ang kulay ng background ay maaaring itakda sa maraming paraan: gamit ang isang hex code, pangalan ng kulay o RGB-entry. Sa CSS3 ito ay naging posible na gamitin sa halip ng RGB-record opsyon sa RGBA.

Hex color code ay maitatala sa ang ari-arian pagkatapos ng lattice: background-color: # FFDAB9. Kung ang mga character sa ang entry na ito ay ang parehong mga pares, ang code ay karaniwang isang maliit na hiwa: # ccff00 maaaring nakasulat na bilang # cf0:

body {background-color: # cf0 ;}.

Ang pangalan ay, kahit na sa pinaka-exotic na mga kulay. Halimbawa, sa karagdagan sa karaniwang pula at puti na maaari mong gamitin NavajoWhite (#FFDEAD) o Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Ang nakaraang pagpipilian ay RGB o RGBA entry ay nagbibigay-daan sa iyo upang tukuyin hindi lamang ang kulay kundi pati na rin ang transparency ng CSS background, ngunit ang paraan ay gagana lamang sa IE bersyon mas lumang kaysa 9. Iba pang mga browser makilala normal na bersyon na may transparency. Ayon sa W3C pamantayan na ito ay lalong kanais-nais gamitin pa rin ang RGBA sa halip ng mga mas karaniwang RGB.

Ang huling halaga sa RGBA background at nagtatakda ng opacity mula sa 0 (transparent) sa 1 (opaque).

Mayroong ilang mga hindi pangkaraniwang mga halaga. Ang kulay ng background ay maaaring itakda gamit ang HSL at HSLA. Ang parehong ay idinagdag sa CSS3, at samakatuwid ay hindi suportado ng IE bersyon 9 o mas mataas. Embodiments magkapareho RGB o RGBA, lamang sa isang iba't ibang mga format: Hue (shade - halaga sa kulay wheel, ay ibinibigay sa degrees), Saturate (saturation - color intensity bilang isang porsyento, mula 0 hanggang 100), Lightness (lightness - liwanag, sinusukat katulad parameter Saturate ).

Katangian ng background-image

Ang pinaka bersiyon cross-browser ng transparent na background - ito ay ang paggamit ng mga imahe. Sa CSS3, maaari kang magtakda ng mas higit pang mga larawan, ito ay ginagawa sa pamamagitan ng isang kuwit. halimbawa:

{Background-imahe ng katawan: url (bg1.png), url (bg2.png)}.

Sa ganitong paraan ng pagsuporta kahit IE8. Ilang mga larawan sa background ng goma ginamit sa layout. Mahalaga, huwag kalimutan na gumamit ng anumang larawan at itakda ang kulay ng background sa CSS, tulad ng mga gumagamit ay maaaring kailangan lang i-upload ang isang imahe.

Katangian ng background-posisyon

Kung gagamitin mo ang imahe upang i-set ang yunit background, ay nagbibigay-daan CSS mong iposisyon ang mga imahe sa kahit saan sa screen. Sa pamamagitan ng default, ang imahe ay matatagpuan sa itaas na kaliwang sulok. Attribute ay tumatagal ng mag-pandiwang mga tagubilin (itaas, ibaba, kaliwa, kanan), isang de-numerong (interes, pixels at iba pang mga yunit). Sa kasong ito, dapat mong tukuyin ang dalawang mga halaga, pahalang at vertical:

body {background-posisyon: right center ;} - sa halimbawang ito, ang pattern ay matatagpuan sa kanang bahagi ng pahina, sa tuktok at ibaba ng larawan distansya sa pareho.

Katangian ng background-size

Minsan ito ay kinakailangan upang mabatak ang CSS background o bawasan ang laki nito. Upang gawin ito, gamitin ang attribute background-size, at ang laki ng mga background ay maaaring itakda sa pixels o porsyento, at anumang iba pang yunit.

Sa katangiang ito, may mga ilang mga problema: para sa tamang display ng isang background sa mga naunang mga bersyon ng prefixes browser na gagamitin. Of course, ang kasalukuyang bersyon ganap na sinusuportahan ang katangiang ito at ang pangangailangan para sa mga tiyak properties naglaho.

Katangian ng background-attachment

Ang attribute na ito ay tumutukoy sa pag-uugali ng mga larawan sa background habang pag-scroll. Kaya, maaari itong tumagal ng 3 mga halaga (hindi kabilang ang nagmamana, ang kabuuang para sa lahat ng mga katangian na tinalakay sa artikulong ito):

• fixed - gumagawa ng mga larawan sa background ng nakatakda;
• mag-scroll - scroll background na may ang magpahinga ng ang mga elemento;
• lokal na - ang larawan sa background ay scrolled kung pag-scroll ay may nilalaman. Background na napupunta na lampas sa ang mga nilalaman ng frame ay naayos na.

Halimbawa ng paggamit:

body {background-attachment naayos}.

Sa kasalukuyan, Firefox ay hindi sumusuporta sa mga huling property (lokal).

Katangian ng background-origin

Ang attribute na ito ay responsable para sa element positioning. Maagang browser nangangailangan ng paggamit ng prefix. Ang ari-arian mismo ay may tatlong mga parameter:

• padding-box ay nakaposisyon kamag-anak sa pattern gilid, habang isinasaalang-alang ang kapal ng frame;
• border-box katangian naiiba mula sa mga nakaraang sa na ang hangganan sa linya ay maaaring maging ganap o bahagyang overlap ang pattern;
• nilalaman-box pagpoposisyon ng imahe pryavyazyvaya nilalaman nito.

Kung tinukoy mo ang maramihang mga halaga, at pagkatapos ay mga browser ay maaaring umepekto sa kanilang sariling paraan: Firefox at Opera nakikita lamang ang unang opsyon.

Katangian ng background-umuulit na

Bilang isang panuntunan, kung ang background na imahe ay tinukoy, ito ay dapat na paulit-ulit nang pahalang o patayo. Para sa ito at gamitin ang attribute background-ulitin. Kaya, mag-block background, CSS na naglalaman ng tulad ng isang ari-arian ay maaaring magkaroon ng isa sa ilang mga parameter:

• walang-umuulit - lumitaw ang imahe sa isang pahina sa isang solong bersyon;
• ulitin - background ay paulit-ulit sa x at y;
• ulitin-x - lamang horizontally;
• ulitin-y - lamang patayo;
• puwang - background ay paulit-ulit, ngunit kung espasyo ay imposible upang punan sa pagitan ng mga larawan lilitaw walang laman;
• pag-ikot - ang imahe ay mababago, kung ito ay hindi punan ang buong lugar ng buong larawan.

Halimbawa ng mga katangian:

body {background-ulitin ang: walang- umuulit na umuulit} - katulad na background-ulitin ang: ulitin-y.

Sa CSS3 ay maaaring tukuyin ang mga halaga para sa maramihang mga larawan kapag naglilista ng mga parameter, na pinaghihiwalay ng mga kuwit.

Katangian ng background-clip

Ang attribute na ito ay tumutukoy sa pag-uugali ng background sa ilalim ng mga hangganan (hal, sa kaso ng mga tuldok-tuldok na mga frame):

• padding-box - background na ipinapakita sa loob ng block;
• border-box - ang imahe ay nagmumula sa ilalim ng framework;
• nilalaman-box - ang larawan sa background ay lilitaw lamang sa loob ng nilalaman.

Halimbawa ng paggamit:

body {background-clip: nilalaman- box;}.

Chrom at Safari nangangailangan -webkit- prefix.

katangian Opacity at filter

opacity attribute ay nagbibigay-daan sa iyo upang i-set ang transparency ng background - CSS ari-arian ay gagana sa lahat ng mga browser. Ang halaga ay naka-set sa hanay 0.0-1.0 inclusive. Sa kasong ito, maaari mong itakda ang transparency ng CSS background Wala pang integer halaga sa halip na 0.3 ay sapat na upang magsulat ng 0.3:

.block {background-image: url ( img.png); opacity: 0.3;}.

Upang itakda ang background opacity, CSS ay angkop kahit para sa IE sa ibaba ng ika-siyam na bersyon, gamitin ang filter na katangian:

.block {background-image: url ( img.png); filter: alpha (opacity = 30)}.

Sa kasong ito, ang opacity halaga ay nakatakda sa pagitan ng 0 at 100. Tandaan na ang opacity ng katangian ng iba't ibang mga setting ng transparency sa pamamagitan ng RGBA inheritance: kapag gumagamit ng opacity ay nagiging malinaw na hindi lamang sa background, ngunit din sa lahat ng mga elemento sa loob ng unit.

Laging subaybayan ang iyong mga istatistika ng paggamit para sa mga browser CIS at lahat ng iba pang mga bansa. Ang pinakamalaking problema ng lahat ng DTP - mas lumang mga bersyon ng IE, hindi sila daan sa iyo upang gamitin ang buong lawak CSS3. Sa layout huwag kalimutan na gamitin ang mga espesyal na serbisyo na suriin kung ang iyong browser ay sumusuporta sa anumang CSS ari-arian. Kung hindi mo maaaring i-install mas lumang mga bersyon ng mga browser, hanapin ang isang serbisyo na suriin ang site sa trabaho sa maraming mga browser sa online.