CSS lafika mangarahara. Mangarahara fototra na soratra amin'ny CSS

Noho ny fahatongavan'ny CSS3 tranonkala endrika miasa amin'ny fomba maro lasa mora kokoa sy lojika kokoa; Rehefa dinihina tokoa, dia afaka izao tena flexibly ampanjifaina misy zavatra, matetika tsy dia mampiasa ny JavaScript. Ndao hoe tokony hanitsy ny mangarahara ny fototra - CSS avy hatrany manolotra safidy maro.

Background voafaritry ny andian-toetra (afara-sary, zava-toerana , zava-habeny, zava-Avereno, zava-miraiki-po, zava-niaviany, zava-le clip, fototra-loko), ny tsirairay avy izay azo voatendry misaraka na mitambatra eo ambany toetra fototra. Andeha hodinihintsika tsirairay izy ireo amin'ny an-tsipiriany.

-Milaza loko fototra

Ao amin'ny CSS, loko afara azo teo amin'ny fomba maro: mampiasa hex fehezan-dalàna, na ny lokony anarana RGB-teny. Amin'ny CSS3 dia lasa azo atao ny mampiasa fa tsy RGB--peo amin'ny RGBA safidy.

Hex loko dia voarakitra ao amin'ny fehezan-dalàna ny fananana araka ny makarakara: fototra-color: # FFDAB9. Raha ny mpandray anjara ao amin'ny dikantenin'i dia mitovy tsiroaroa, ny fehezan-dalàna matetika kely tapaka: # ccff00 azo soratana toy ny # cf0:

vatana {fototra-color: # cf0 ;}.

Ny anarana hoe, na dia ao amin'ny loko hafakely indrindra. Ohatra, ankoatry ny fitsipika mena sy fotsy afaka mampiasa NavajoWhite (#FFDEAD) na Honeydew2 (# E0EEE0):

vatana {fototra-loko: volomparasy; }.

Ny safidy farany no RGB na RGBA teny mamela anao mamaritra ny loko, fa tsy ny mangarahara koa ny CSS afara, fa ny fomba miasa afa-tsy IE dikan-zokiko 9. Navigateur hafa miaiky dikan-ara-dalàna amin'ny mangarahara. Araka ny fenitra W3C dia tsaratsara kokoa ny mampiasa mbola RGBA fa tsy ny mahazatra kokoa RGB.

Ny sanda farany tamin'ny RGBA fiaviana Ary mampirehitra ny Hatevin'ny avy 0 (mangarahara) ny 1 (manjavozavo).

Misy ny sasany tsy mahazatra soatoavina. Ny loko fototra azo apetraka amin'ny fampiasana ny HSL sy HSLA. Samy nanampy ho CSS3, ka noho izany dia tsy dikan-tohanan'ny IE 9 na ambony kokoa. Embodiments mitovy RGB na RGBA, afa-tsy hafa endrika: Hue (alokaloka - sarobidy ny loko kodiarana, omena ao amin'ny fiakarana), Hamelombelona (saturation - loko mafy toy ny isan-jato, avy any 0 ka hatramin'ny 100), fandokafany tena (fandokafany tena - ny famirapiratry ny mazava, norefesiny koa fikirana Hamelombelona ).

Milaza lafika-sary

Ny tena cross-navigateur dikan-tenin'ny mangarahara fototra - izany no fampiasana ny sary. Amin'ny CSS3, dia afaka hametraka bebe kokoa sary, izany dia atao amin'ny alalan'ny faingo. ohatra:

Lafika-body {sary: URL (bg1.png), URL (bg2.png)}.

Ity fomba fanohanana na dia IE8. Maro ireo sary eo aoriana ny fingotra ny fisehon'ny ampiasaina ao. Zava-dehibe, aza adino ny mampiasa sary sy nametraka ny fototra loko amin'ny CSS, toy ny mpampiasa dia afaka mampakatra sary fotsiny.

Milaza lafika-toerana

Raha toa ianao ka mampiasa ny sary mba hametraka ny mombamomba vondrona, CSS dia mamela anao hametraka ny sary na aiza na aiza eo amin'ny efijery. Ny toerana misy anao, ny sary no misy ao amin'ny ambony havian'ny. Toetra maka am-bava na toromarika (ambony, ambany, ankavia, ankavanana), ny isa (liana, teboka sy ny vondrona). Amin'ity tranga ity, dia tsy maintsy mamaritra soatoavina roa, marindrano sy mijidina:

vatana {andamosina-toerana: tsara foibe ;} - in ity ohatra, ny fomba dia ho hita eo amin'ny sisiny ankavanan'ny ny pejy, ny ambony sy ny ambany ny sary lavitra ho toy izany koa.

Milaza lafika-habeny

Indraindray dia ilaina ny haninjitra ny CSS fototra na hampihenana ny habeny. Mba hanaovana izany, dia ampiasao ny toetra zava-habeny, ary ny haben'ny ny afara azo teo amin'ny teboka na ny isan-jato, ary ny vondrona hafa.

Noho io toetra io, misy olana, fa marina fanehoana ny fototra ao amin'ny teo aloha dikan 'ny mpitety tovona mba ho ampiasaina. Mazava ho azy, ny dikan amin'izao fotoana izao, satria manohana tanteraka ity toetra ity sy ny filàna nanjavona fananana manokana.

Milaza lafika-miraiki-po

Ity toetra ity dia mamaritra ny fitondran-tena ny sary afara raha scrolling. Noho izany, dia afaka maka 3 soatoavina (tsy ao anatin'izany ny handova, tanteraka ho an'ny rehetra ny toetra resahina ato amin'ity lahatsoratra ity):

• raikitra - mahatonga ny sary teo amin'ny mombamomba ny raikitra;
• horonan-taratasy - fototra horonam-boky ny sisa amin'ny zavatra;
• an-toerana - ny sary ao amin'ny mombamomba ny scrolled scrolling raha manana afa-po. Background izay mandeha any an-dafin'ny anatin'ilay tafatoetra ny endriny.

Ohatra ny fampiasana:

{vatana eo andamosina-miraiki-po raikitra}.

Amin'izao fotoana izao, Firefox tsy mahazaka ireo fananana farany (eo an-toerana).

Milaza lafika-fiaviany

Ity toetra ity dia tompon'andraikitra amin'ny ny toerany singa. Tany am-boalohany navigateur mitaky ny fampiasana ny tovona. Ny fananana no efa telo masontsivana:

• padding-efajoro dia napetraka mikasika ny sisin'ny endriky, raha ny soso-kevitr'izy ny hatevin'ny ny toetsika
• fananana fari-efajoro mitovy amin'ny teo aloha eo ny sisin-tsipika dia afaka ny ho tanteraka na amin'ny ampahany hifanindry ny lamina;
• afa-po-boaty toerany sary pryavyazyvaya ny votoatiny.

Raha mamaritra soatoavina maro, dia afaka navigateur rehefa manao azy ho fomba: Firefox sy Opera mahafantatra afa-tsy ny safidy voalohany.

Milaza lafika-avereno

Toy ny fitsipika, raha ny sary afara dia voatondro mazava, dia tsy maintsy miverimberina horizontally na mitsangana. Noho izany dia nampiasa ny toetra fototra-avereno. Noho izany, andian-tsoratra fototra, CSS izay ahitana fananana toy izany dia afaka manana iray amin'ireo masontsivana maro:

• no-Avereno - ilay sary hita eo amin'ny pejy iray ao amin'ny dikan-;
• avereno - fototra dia miverimberina ao ny X sy Y;
• avereno-X - horizontally ihany;
• avereno-y - ihany no mitsangana;
• toerana - lafika no miverimberina, fa raha toerana misy azo atao hahazoana mameno eo amin'ny sary hiseho foana tsy mitondra fanatitra;
• manodidina - ny sary dia Nananika ny, raha tsy mameno ny faritra manontolo ny sary manontolo.

Ohatra ny toetra;

vatana {andamosina-Avereno: tompon'andraikitra amin'ny miverimberina Avereno} - mitovy fiaviana-Avereno: hamerina-y.

In CSS3 Mety mamaritra hasina ho an'ny maro ny sary, rehefa nitanisa masontsivana, tafasaraka amina faingo.

Milaza lafika-Clip

Io toetra mamaritra ny fitondran-tena ny zava ambanin'ny sisin (oh, ao izany no toetry ny mitsipitsipika zana-kazo):

• padding-boaty - fototra naseho tao amin'ny afovoan-andian-tsoratra;
• fari-efajoro - ny sary avy eo ambanin'ny rafitra;
• afa-po-efajoro - ny sary eo amin'ny fototra dia ihany no hiseho ao anatin'ny votoatiny.

Ohatra ny fampiasana:

vatana {andamosina-Clip: content- boaty;}.

Chrom sy Safari mila tovona -webkit-.

Hatevin'ny toetra sy ny sivana

Hatevin'ny toetra mamela anao hametraka ny mangarahara ny fototra - CSS fananana asa rehetra navigateur. Ny zava-dehibe ho ambony ny isan-karazany avy amin'ny 0.0 ny 1.0 manontolo. Amin'ity tranga ity, dia afaka nametraka ny mangarahara ny CSS afara tsy misy vidiny integer 0.3 fa tsy ampy ny hanoratra .3:

.block {andamosina-sary: URL ( img.png); Hatevin'ny: .3;}.

Mba hametraka ny zava Hatevin'ny, CSS dia mety na ho an'ny IE eto ambany ny dika fahasivy, mampiasa ny sivana toetra:

.block {andamosina-sary: URL ( img.png); sivana: Alpha (Hatevin'ny = 30)}.

Amin'ity tranga ity, ny Hatevin'ny lanjan'izy ireo dia napetraka eo anelanelan'ny 0 sy 100 Mariho fa ny Hatevin'ny nahatonga toe-javatra isan-karazany amin'ny alalan'ny RGBA mangarahara lova: rehefa mampiasa Hatevin'ny lasa tsy mazava ny fototra ihany, fa izay rehetra ny singa ao anatin'ny vondrona.

Hanara-maso hatrany ny fampiasana ny antontan'isa ho CIS navigateur sy ny firenena hafa rehetra. Ny olana lehibe indrindra rehetra DTP - zokiny dikanteny IE, dia tsy hamela anao hampiasa ny tena halehiben'ny CSS3. Ao amin'ny firafitry aza adino ny mampiasa ny tolotra manokana izay hahitana raha manohana ny navigateur rehetra CSS fananany. Raha toa tsy afaka mametraka zokiolona dikan ny navigateur, mahita ny fanompoana izay hijery ny toerana maro ny asa amin'ny navigateur-tserasera.