Arbeta med CSS3 bakgrundsbilder

Detta segment av CSS3-serien kommer att fokusera på bilder, specifikt CSS3-bakgrundsbilder som kan implementeras i många webbläsare idag. Kolla in de tidigare inläggen i CSS3-serien:

  • Titta först på CSS3-webbdesignelement, som fokuserade på de olika modulerna, CSS3-visningsregler, webbläsarens prefix, lutningar, tabeller och teckensnitt.
  • CSS3-resurssyn: CSS3.info, som är en CSS3-resursgranskning av webbplatsen CSS3.info.
  • Arbeta med CSS3-modulen för flera kolumner

CSS3 bakgrundsbilder

Bakgrundsbilder och strukturer kan användas för att lägga en bakgrund utan användning av separata divs, vilket ofta lägger en fin grafisk touch till webbplatser. I CSS3 kan vi nu också använda dimensioner för bilder och definiera flera bakgrundsbilder inom en enda regel. Det finns två metoder som gör det möjligt att fastställa regler. De är enskilda bakgrundsregel CSS3 och bakgrundsregeln CSS3; Jag kommer att granska båda i det här segmentet.

Webbläsarsupport för flera CSS3-bakgrunder inkluderar Mozilla Firefox (3.6+), Safari / Chrome (1.0 / 1.3 +), Opera (10.5+) och Internet Explorer (9.0+).

Den individuella CSS3-bakgrundsmetoden är i huvudsak en kommaseparerad lista med skiktade bilder skrivna i syntaxform:

 bakgrund: url (% sökväg% / bild1.xxx), url (% sökväg% / bild2.xxx); 

Och med den enskilda bakgrundsmetoden kan vi inkludera en kommaseparerad lista över bakgrundsegenskaper inklusive bakgrundsupprepning, bakgrundsfästning, bakgrundsposition, bakgrundsklipp, bakgrund-ursprung och bakgrundsstorlek.

I exemplet nedan definieras bakgrunden av klass med bredd 800, höjd 500 och en bakgrund som innehåller tre bilder i lager, med bakgrundsposition och bakgrundsupprepning definierad som visas i denna CSS3-kod:

 .mBg_1 { 
 bredd: 800 px; 
 höjd: 500 px; 
 bakgrund: 
 url (bilder / barn.png), 
 url (bilder / clouds.png), 
 url (bilder / grass.png); 
 bakgrundsposition: botten, vänster topp, botten; 
 bakgrund-upprepa: ingen upprepa; 
 } 

Ovanstående kod resulterar i detta exempel på lada, moln och gräsbilder som visas i Chrome:

Figur A

Det andra sättet att presentera bakgrundsbilder använder det som kallas bakgrundskortormetoden. Specifikationen W3C CSS3 bakgrunder och gränser ger denna förklaring av syntaxen för korthet i bakgrunden:

Antalet kommaseparerade objekt definierar antalet bakgrundslager. Med tanke på en giltig deklaration sätter kortheten först för varje lager motsvarande lager för varje "bakgrundsposition", "bakgrundstorlek", "bakgrund-upprepning", "bakgrund-ursprung", "bakgrund-klipp" och "bakgrund -fästning 'till den egenskapens ursprungliga värde, tilldelar sedan alla uttryckliga värden som anges för detta lager i deklarationen. Slutligen är "bakgrundsfärg" inställd på den angivna färgen, om någon, annars inställd på dess ursprungliga värde.

Om ett värde är närvarande sätter det både "bakgrund-ursprung" och "bakgrund-klipp" till det värdet. Om två värden finns, ställer den första in "bakgrund-ursprung" och den andra "bakgrund-klippet".

Observera att bakgrundsfärgen måste vara det sista lagret i deklarationen med hjälp av den korta metoden.

Ett sätt att representera bakgrunden med kortfattad metod som anger bilder med var och en som ges en exakt position representeras i följande syntax:

 bakgrund: url (% sökväg%) Xpx Ypx, där Xpx = x-axel och Ypx = y-axel; 

Till exempel definierar CSS-bakgrundsregeln nedan html för dokumentet med ett antal små bilder inklusive ett rutnät och flera färgrutchips lagrade ovan.

 html { 
 bakgrund: 
 url (bilder / ffccff_swatch.png) 175px 25px utan upprepning, 
 url (bilder / ff9933_swatch.png) 125px 425px utan upprepning, 
 url (bilder / cccc33_swatch.png) 325px 325px utan upprepning, 
 url (bilder / 669966_swatch.png) 325px 125px utan upprepning, 
 url (bilder / cccccc_swatch.png) 175px 275px utan upprepning, 
 url (bilder / ffffcc_swatch.png) 425px 125px utan upprepning, 
 url (bilder / ccffcc_swatch.png) 575px -25px utan upprepning, 
 url (bilder / ffccff_swatch.png) 225px 425px utan upprepning, 
 url (bilder / ff9933_swatch.png) -25px 225px utan upprepning, 
 url (bilder / ffccff_swatch.png) 525px 325px utan upprepning, 
 url (bilder / ff9933_swatch.png) 375px 225px utan upprepning, 
 url (bilder / cccc33_swatch.png) 125px 225px utan upprepning, 
 url (bilder / grid.png) upprepa; 
 } 

Det här exemplet, med den korta bakgrundsmetoden, resulterar i en grafisk bakgrund och innehåller en del av innehållet från tidigare CSS3-segment i HTML-koden, inklusive blockquote- och flerspelarslayout, och visas som visas nedan i Chrome:

Figur B

Positionering av bilder med hjälp av metoden CSS3-korthet för bakgrundsegenskaper kan också ta formen av att använda en position för varje bild som i denna form:

 .mBg_2 { 
 bredd: 800 px; 
 höjd: 500 px; 
 bakgrund: 
 url (bilder / barn.png) noll-upprepning längst ner till höger 
 url (bilder / clouds.png) upprepad vänster upprepad, 
 url (bilder / grass.png) nedre inget upprepa; 
 } 

Ovanstående kod resulterar i följande som visas i Chrome:

Figur C

Som du kan se av exemplen ovan, finns det två sätt att presentera de skiktade bilderna med CSS3. De nästa segmenten på CSS3 granskar kantbilder, rundade hörn, 3D-text, övergång och andra funktioner och funktioner som kan implementeras idag.

© Copyright 2020 | mobilegn.com