CSS background uwazi. Uwazi background au maandishi kwa CSS

Pamoja na ujio wa CSS3 mtandao wabunifu kazi kwa njia nyingi imekuwa rahisi zaidi na zaidi mantiki: baada ya yote, sasa unaweza kweli smidigt Customize kitu chochote, chini ya mara kwa mara ya kutumia JavaScript. Tuseme unahitaji kurekebisha uwazi wa background - CSS mara moja hutoa chaguzi kadhaa.

Background inavyoelezwa na seti ya sifa (background-picha, background-nafasi , background sauti, background kurudia, background attachment, background asili, background-clip, background rangi), ambayo kila mmoja anaweza kupewa tofauti au pamoja chini ya sifa nyuma. Hebu kuchunguza kila mmoja wao kwa kina.

Sifa background rangi

Katika CSS, rangi ya asili inaweza kuweka kwa njia kadhaa: kwa kutumia misimbo sita ya, rangi jina au RGB-entry. Katika CSS3 ikawa inawezekana kutumia badala ya RGB-kurekodi chaguo kwa RGBA.

Hex code rangi ni kumbukumbu katika mali baada kimiani: background-color: # FFDAB9. Kama wahusika katika kuingia hii ni jozi moja, kanuni ni kawaida kukatwa kidogo: # ccff00 inaweza kuandikwa kama # cf0:

mwili {background-color: # cf0 ;}.

jina ni, hata katika rangi zaidi kigeni. Kwa mfano, kwa kuongeza kiwango nyekundu na nyeupe unaweza kutumia NavajoWhite (#FFDEAD) au Honeydew2 (# E0EEE0):

mwili {background-color: zambarau; }.

chaguo mwisho ni RGB au RGBA kuingia inakuwezesha kubainisha si tu rangi lakini pia uwazi wa CSS background, lakini njia kazi tu katika matoleo IE wakubwa zaidi 9. Vivinjari vingine kutambua kawaida toleo uwazi. Kwa mujibu wa viwango vya W3C ni vyema kutumia bado rgba badala ya kawaida zaidi RGB.

thamani ya mwisho katika RGBA background na seti opacity kutoka 0 (uwazi) kwa 1 (opaque).

Kuna baadhi ya maadili ya kawaida. rangi background inaweza kuweka kutumia HSL na HSLA. Wote ziliongezwa kwenye CSS3, na kwa hiyo si mkono na IE version 9 au zaidi. Embodiments kufanana RGB au RGBA, tu katika muundo tofauti: Hue (kivuli - thamani rangi gurudumu, imetolewa katika nyuzi), kueneza (kueneza - kiwango rangi kama asilimia, kutoka 0 100), Lightness (lightness - mwangaza, kipimo vile vile vigezo kueneza ).

Sifa background-image

zaidi ya kuvuka browser toleo la asili ya uwazi - hii ni matumizi ya picha. Katika CSS3, unaweza kuweka picha zaidi, hii hufanywa kwa koma. mfano:

{Background-mwili picha: url (bg1.png), url (bg2.png)}.

Kwa njia hii ya kusaidia hata IE8. Picha kadhaa kwa nyuma ya mpira kutumika katika mpangilio. Muhimu sana, usisahau kutumia picha yoyote na kuweka rangi ya asili katika CSS, kwa kuwa mtumiaji unaweza tu kupakia picha.

Sifa background-nafasi

Ukitumia mfano wa kuweka background kitengo, CSS utapata nafasi ya picha popote kwenye screen. By default, picha iko katika kona ya juu kushoto. Sifa inachukua maelekezo ama matusi (juu, chini, kushoto, kulia), namba (riba, saizi na vitengo vingine). Katika hali hii, lazima bayana thamani mbili, usawa na wima:

mwili {background-nafasi: kituo cha haki ;} - katika mfano huu, muundo itakuwa iko upande wa kulia wa ukurasa, juu na chini ya picha umbali na moja.

Sifa background-size

Wakati mwingine ni muhimu kunyoosha CSS background au kupunguza ukubwa wake. Ili kufanya hivyo, kutumia sifa background-size, na ukubwa wa background inaweza kuweka katika saizi au asilimia, na vitengo nyingine yoyote.

Pamoja na sifa hii, kuna baadhi ya matatizo: kwa kuonyesha sahihi ya historia katika matoleo ya awali ya viambishi awali browser ya kutumika. Bila shaka, toleo la sasa inasaidia kikamilifu sifa hii na haja ya mali maalum kutoweka.

Sifa background kiambatisho

Sifa hii inabainisha tabia za asili picha wakati wa kusogeza. Hivyo, inaweza kuchukua 3 maadili (si pamoja na kurithi, jumla kwa wote wa sifa kujadiliwa katika makala hii):

• kudumu - inafanya picha kwenye background ya kudumu;
• kitabu - historia vitabu na wengine wa mambo;
• ndani - picha kwenye background ni scrolled kama scrolling ina maudhui. Background kwamba ni zaidi ya maudhui ya sura ni fasta.

Mfano wa kutumia:

mwili {background-attachment fasta}.

Hivi sasa, Firefox haina msaada mali mwisho (kienyeji).

Sifa background-asili

Sifa hii ina jukumu la kipengele positioning. browsers Mapema zinahitaji matumizi ya viambishi awali. mali yenyewe ina vigezo tatu:

• padding-sanduku ni nafasi nzuri ikilinganishwa na muundo makali, wakati kwa kuzingatia unene wa sura;
• mali mpaka sanduku tofauti na ya awali katika kuwa mstari mpaka inaweza kuwa kabisa au sehemu kuingiliana mfano,
• maudhui sanduku positioning picha pryavyazyvaya maudhui yake.

Ukitaja maadili nyingi, basi browsers inaweza kuathiriwa kwa njia zao wenyewe: Firefox na Opera wanaona tu chaguo la kwanza.

Sifa background kurudia

Kama kanuni, kama picha ya chini chini maalum, ni lazima mara kwa mara usawa au wima. Kwa hili na kutumiwa sifa background kurudia. Hivyo, kuzuia background, CSS ambayo ina mali hizo unaweza kuwa moja ya vigezo kadhaa:

• hakuna kurudia - picha inaonekana katika ukurasa katika toleo moja;
• kurudia - ya chini chini tena katika x na y,
• kurudia-x - sambamba tu;
• rudia-y - wima tu;
• nafasi - ya chini chini ya mara kwa mara, lakini kama nafasi haiwezekani kujaza kati ya picha kuonekana tupu,
• mzima - picha hupimwa, kama haina kujaza eneo lote la picha nzima.

Mfano wa sifa:

mwili {background-repeat: no kurudia kurudia} - sawa background kurudia: kurudia-y.

Katika CSS3 kubainisha maadili kwa picha nyingi wakati kuorodhesha vigezo, kutengwa kwa koma.

Sifa background-clip

Sifa hii amefafanua tabia ya asili chini ya mipaka (kwa mfano, katika kesi ya muafaka dotted):

• padding-sanduku - background kuonyeshwa katika mambo ya ndani ya block;
• mpaka sanduku - picha inakuja chini ya mfumo;
• maudhui sanduku - picha kwenye background tu kuonekana ndani ya maudhui.

Mfano wa kutumia:

mwili {background-video: maudhui- sanduku;}.

Chrom na Safari zinahitaji -webkit- kiambishi awali.

sifa Opacity na chujio

opacity sifa utapata kuweka uwazi wa background - CSS mali kazi katika browsers wote. thamani ya kuweka katika aina mbalimbali 0.0-1.0 jumuishi. Katika kesi hii, unaweza kuweka uwazi wa CSS background haina thamani integer badala ya 0.3 inatosha kuandika .3:

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

Kuweka background opacity, CSS yanafaa hata kwa IE chini version tisa, kutumia filter sifa:

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

Katika hali hii, thamani opacity ni kuweka kati ya 0 na 100. Kumbuka kuwa opacity sifa mazingira tofauti uwazi kupitia RGBA urithi: wakati wa kutumia opacity inakuwa wazi si tu nyuma, lakini pia mambo yote ndani ya kitengo.

Daima kufuatilia takwimu za matumizi yako kwa ajili ya browsers CIS na nchi nyingine zote. tatizo kubwa kabisa DTP - matoleo ya zamani ya IE, hawana kuruhusu kutumia full kiasi CSS3. Katika mpangilio usisahau kutumia huduma maalum ambayo kuangalia kama browser yako inasaidia mali yoyote CSS. Kama huwezi kufunga matoleo ya zamani ya browsers, kutafuta huduma ambayo itaangalia tovuti kazi katika browsers mbalimbali online.