CSS hondo gardentasuna. hondo gardena edo testu CSS ekin

CSS3 web diseinatzaile etorrerak modu askotan lan bihurtu errazagoa eta logikoa: azken finean, orain ezin duzu benetan malgutasunez pertsonalizatu edozein objektu, gutxiagotan Javascript jo. Demagun atzealdean gardentasuna doitzeko behar duzu - CSS berehala hainbat aukera eskaintzen ditu.

Aurrekariak atributu multzo bat definitzen (hondo-irudia, hondo-posizioa , hondo-tamaina, hondo-errepikatu, hondo-eranskina, hondo-jatorriko, hondo-clip, hondo-kolorea), eta horietako bakoitzak bere aldetik esleitzen edo konbinatu daitezke attribute azpian hondo. Dezagun horietako bakoitzean aztertu gurekin xehetasunez.

Atributu background-color

CSS har, atzeko kolorea hex kode bat, kolore izena edo RGB-sarrera erabiliz: hainbat modutan ezar daiteke. CSS3, posible bihurtu zen ordez RGBA batera RGB-grabaketa aukera erabili.

background-color: # FFDAB9 Hex color kodea da sare ostean jabetza grabatu. Sarrera honen pertsonaiak bikoteak berdinak dira badu, kodea ohi da ebaki txiki bat: # ccff00 egon # cf0 idatzi daiteke:

body {background-color: # cf0 ;}.

Izena da, nahiz eta kolore exotikoak ere. Adibidez, estandarra white NavajoWhite (#FFDEAD) edo Honeydew2 (# E0EEE0) erabili ahal izango dituzu gorri eta gain:

body {background-color: morea; }.

Azken aukera RGB da edo RGBA sarrera ahalbidetzen ez bakarrik kolorea, baina, era berean, CSS atzealdean gardentasuna zehazteko duzu, baina metodoa du lan IE bertsioak 9 baino zaharragoak bakarrik. Beste nabigatzaile aitortu bertsioan normal gardentasuna batera. W3Cren estandarrak arabera, hobe da erabiltzeko oraindik GBUA ordez ohikoa RGB dira.

RGBA hondo azken balioa eta 0 (gardena) eta 1 (opakoa) to opakutasuna ezartzen du.

Badira ezohiko balio batzuk. atzeko kolorea ezar daiteke ÑSA eta HSLA erabiliz. Biak ziren CSS3 gehitu, eta, beraz, ez dira IE Bertsio 9 edo altuagoa onartzen. Horretarako RGB berdina edo RGBA, beste formatu batean bakarrik: Ñabardura (itzala - balio kolore gurpileko, gradutan eman), saturatu (saturazioa - kolore intentsitatea ehuneko gisa, 0tik 100era), argitasuna (argitasuna - argitasuna, neurtua antzera parametro-saturatu ).

Atributu hondo-irudi

Gehien mugaz nabigatzaileak hondo gardena bertsio - honek irudiaren erabilera da. CSS3, irudiak, are gehiago ezar dezakezu, hau da koma bidez egin. Adibidez:

{Background-gorputz irudia: url (bg1.png), URL (bg2.png)}.

nahiz euskarri IE8 modu hau. Diseinuaren erabilitako gomazko atzeko in Hainbat irudiak. Garrantzitsua, ez ahaztu edozein irudi erabili eta hondo CSS kolorea ezartzeko, egiten ez dutenek, besterik gabe, irudi bat igo.

Atributu hondo-posizioa

irudia erabili duzu hondo unitate ezartzeko bada, CSS irudia lekutan kokatzeko you pantailan aukera ematen du. Berez, irudia da, goiko ezkerreko izkinan dago. Attribute bai hitzezko argibideak (goian, behean, ezkerrean, eskuinean), zenbaki-a (interesak, pixel eta beste unitate) hartzen du. Kasu honetan, bi balio, horizontal eta bertikala zehaztu behar duzu:

body {background-posizioa: eskuineko zentroan ;} - adibide honetan, patroia egon eskuineko orrialdean, goian eta behean irudia bera distantziaren aldean kokatuko da.

Atributu hondo-tamaina

Batzuetan, beharrezkoa da CSS atzealdean luzatzeko edo bere tamaina murrizteko. Horretarako, erabili atributu hondo-tamaina, eta atzealdean egon pixel edo ehunekotan ezar daiteke tamaina, eta beste edozein unitate.

attribute honekin, arazo batzuk daude: alde nabigatzaileak aurrizkien lehenago bertsioak atzeko bistaratzea zuzena erabili ahal izateko. Jakina, uneko bertsioa guztiz attribute hori onartzen eta propietate espezifikoak beharra desagertu.

Atributu hondo-eranskin

Atributu hori hondo irudiak korritu berriz portaera zehazten ditu. Beraz, 3 balioak (ez oinordetzan du, artikulu honetan eztabaidatu atributuak guztientzat guztira barne) hartu ahal izango da:

• finkoa - finkoa atzeko irudian egiten du;
• korrituko - elementu gainerako hondo pergamino;
• local - hondo irudi korritutako da korritzea, eduki badauka. Aurrekariak duten markoaren edukia haratago doa finkoa da.

Erabilera Adibidea:

body {background-eranskin finko}.

Gaur egun, Firefox ez duela azken jabetza (tokiko) onartzen.

Atributu hondo-jatorria

attribute Hau da kokatzea elementu erantzule. Goiz nabigatzaile aurrizkiak erabiltzea eskatzen. Jabetza bera hiru parametro ditu:

• padding-box kokatu da puntako eredua erlatiboa, berriz, kontuan markoaren lodiera hartuta;
• mugatik-box propietate horretan aurreko muga-lerroa izan daiteke ezberdina erabat edo partzialki gainjarri eredua;
• eduki-box kokatzea irudia bere edukia pryavyazyvaya.

hainbat balio zehazten baduzu, orduan nabigatzaile dezake bere erara erreakzionatzen: Firefox eta Opera hauteman lehen aukera bakarra.

Atributu background-errepikatu

Oro har, atzeko irudia zehaztu bada, horizontalki edo bertikalki errepikatu behar da. Horretarako, eta atributu background-errepikatu erabiltzen. Horrela, blokeatu atzealde, CSS eta bertan, besteak beste, etxebizitza bat dauka, hainbat parametro bat izan daiteke:

• no-errepikatu - irudia Bertsio bakar batean orri batean agertzen da;
• errepikatu - hondo da x eta y errepikatzen;
• errepikatu-x - soilik horizontalki;
• errepikatu-y - soilik bertikalean;
• espazio - hondo errepikatzen da, baina espazio ezinezkoa da bete argazkien arteko bada agertzen, hutsik;
• Txanda - irudia eskalatu da, bada, ez du irudi osoa azalera osoa bete.

ezaugarriak adibidea:

body {background-errepikatu: nobleziako errepikatu errepikatu} - antzeko background-errepikatu: errepikatu-y.

CSS3 ere hainbat irudi balioak zehaztu daiteke parametroak, komaz bereizita zerrendarekin.

Atributu hondo-clip

atributu horrek mugak azpian atzealdean portaera definitzen da (adibidez, puntuzko markoak kasuan):

• padding-box - bloke barnealdean bistaratuko hondo;
• mugatik-box - irudia esparruan dator;
• eduki-kaxa - atzeko irudi bakarra izango edukien barruan agertuko.

Erabilera Adibidea:

body {background-clip: eduki box;}.

Chrom eta Safari webkit- aurrizkia behar.

Opakotasuna ezaugarri eta iragazkia

opakutasun attribute aukera ematen atzealdean gardentasuna ezartzeko aukera - CSS jabetza ere lan egingo nabigatzaile guztietan. balioa barrutia girotuta 0,0 eta 1,0, biak barne. Kasu honetan, CSS atzealdean gardentasuna ezar dezakezu zenbaki oso ez beharrean 0,3 nahikoa .3 idazten da:

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

hondo opakutasuna ezartzeko, CSS, nahiz eta IE bederatzigarren bertsioaren azpitik egokia da, erabili iragazkia atributua:

.block {background-image: url ( img.png); iragazkia: Alfa (opakutasun = 30)}.

Kasu honetan, opakotasuna balioaren arteko 0 eta 100 Note ezartzen da opakotasuna duten gardentasun aukera ezberdinak egozten RGBA herentzia bidez: noiz opakutasun erabiliz atzealdean bihurtzen argi ez bakarrik, baina baita unitate barruan elementu guztiak.

Beti segimendua zure erabilera CISen nabigatzaile eta beste herrialde guztietako estatistikak. DTP guztien arazo nagusia - IE bertsio zaharragoak, ez dute uzten beteta neurri CSS3 erabiltzeko aukera. diseinua ere ez ahaztu zerbitzu bereziak zure nabigatzailea edozein CSS jabetza onartzen duen ala ez egiaztatzeko hori erabiltzeko. Ezin badituzu nabigatzaile bertsio zaharragoak instalatzeko, zerbitzu hori gune nabigatzaile hainbat lan egiaztatuko du online aurkitzeko.