Arbejde med CSS3 baggrundsbilleder

Dette segment af CSS3-serien vil fokusere på billeder, specifikt CSS3-baggrundsbilleder, der kan implementeres i mange browsere i dag. Se de foregående indlæg i CSS3-serien:

  • Se først på CSS3-webdesignelementer, der fokuserede på de forskellige moduler, CSS3-visningsregler, browserpræfikser, gradueringer, tabeller og skrifttyper.
  • CSS3-ressourceanmeldelse: CSS3.info, som er en CSS3-ressourceanmeldelse af webstedet CSS3.info.
  • Arbejde med CSS3 Multi-column Layout Module

CSS3 baggrundsbilleder

Baggrundsbilleder og teksturer kan bruges til at lagde en baggrund uden brug af separate divs, hvilket ofte tilføjer et dejligt grafisk touch til websteder. I CSS3 kan vi nu også anvende dimensioner på billeder og definere flere baggrundsbilleder inden for en enkelt regel. Der er to metoder, der tillader etablering af regler. De er CSS3-individuelle baggrundsregel og CSS3-korthovedbaggrundsregel; Jeg vil gennemgå dem begge i dette segment.

Browserstøtte til flere CSS3-baggrunde inkluderer Mozilla Firefox (3.6+), Safari / Chrome (1.0 / 1.3 +), Opera (10.5+) og Internet Explorer (9.0+).

CSS3-individuel baggrundsmetode er i det væsentlige en kommasepareret liste over lagdelte billeder skrevet i syntaksform:

 baggrund: url (% sti% / image1.xxx), url (% sti% / image2.xxx); 

Og med den individuelle baggrundsmetode kan vi inkludere en kommasepareret liste over baggrundsegenskaber inklusive baggrund-gentagelse, baggrund-vedhæftning, baggrundsposition, baggrund-klip, baggrund-oprindelse og baggrund-størrelse.

I nedenstående eksempel defineres baggrunden af ​​en klasse med en bredde på 800, højde på 500 og en baggrund, der indeholder tre billeder lagvis, med baggrundsposition og baggrund-gentagelse defineret som vist i denne CSS3-kode:

 .mBg_1 { 
 bredde: 800px; 
 højde: 500px; 
 baggrund: 
 url (images / barn.png), 
 url (images / clouds.png), 
 url (billeder / grass.png); 
 baggrundsposition: bund, venstre top, bund; 
 baggrund-gentagelse: ingen gentagelse; 
 } 

Ovenstående kode resulterer i dette eksempel på billeder fra lade, sky og græs, der vises i Chrome:

Figur A

Den anden måde at præsentere baggrundsbilleder på udnytter det, der er kendt som baggrundskortemetoden. W3C CSS3 Baggrunds- og grænsespecifikationen giver denne forklaring af syntaks i kortvarig baggrund:

Antallet af komma-adskilte elementer definerer antallet af baggrundslag. Givet en gyldig erklæring, indstiller kortet for hvert lag det tilsvarende lag for hver af 'baggrundsposition', 'baggrund-størrelse', 'baggrund-gentagelse', 'baggrund-oprindelse', 'baggrund-klip' ​​og 'baggrund -tilknytning til den egenskabs oprindelige værdi og tildeler derefter alle eksplicitte værdier, der er angivet for dette lag i erklæringen. Endelig er 'baggrundsfarve' indstillet til den angivne farve, hvis nogen, ellers indstillet til dens oprindelige værdi.

Hvis en værdi er til stede, indstiller den både 'baggrund-oprindelse' og 'baggrund-klip' ​​til denne værdi. Hvis der er to værdier, sætter den første 'baggrund-oprindelse' og den anden 'baggrund-klip'.

Bemærk her, at baggrundsfarven skal være det sidste lag i erklæringen ved hjælp af korthormetoden.

En måde at repræsentere baggrundskortemetoden med specificering af billeder med hver en, der får en præcis position, er repræsenteret i følgende syntaks:

 baggrund: url (% sti%) Xpx Ypx, hvor Xpx = x-akse og Ypx = y-akse; 

F.eks. Definerer CSS-baggrundsregel nedenfor HTML-dokumentet med et antal små billeder, inklusive et gitter og flere farveprøver, der er lagdelt ovenfor.

 html { 
 baggrund: 
 url (images / ffccff_swatch.png) 175px 25px uden gentagelse, 
 url (images / ff9933_swatch.png) 125px 425px ingen gentagelse, 
 url (images / cccc33_swatch.png) 325px 325px ingen gentagelse, 
 url (images / 669966_swatch.png) 325px 125px ingen gentagelse, 
 url (images / cccccc_swatch.png) 175px 275px ingen gentagelse, 
 url (images / ffffcc_swatch.png) 425px 125px ingen gentagelse, 
 url (images / ccffcc_swatch.png) 575px -25px ingen gentagelse, 
 url (images / ffccff_swatch.png) 225px 425px ingen gentagelse, 
 url (images / ff9933_swatch.png) -25px 225px ingen gentagelse, 
 url (images / ffccff_swatch.png) 525px 325px ingen gentagelse, 
 url (images / ff9933_swatch.png) 375px 225px ingen gentagelse, 
 url (images / cccc33_swatch.png) 125px 225px ingen gentagelse, 
 url (images / grid.png) gentagelse; 
 } 

Dette eksempel, ved hjælp af metoden med kortvarig baggrund, resulterer i en grafisk baggrund, der inkorporerer noget af indholdet fra tidligere CSS3-segmenter i HTML, herunder blokquote- og flersøjlelayout, og gengives som vist nedenfor i Chrome:

Figur B

Placering af billeder ved hjælp af CSS3-korthovedbakgrundsegenskabsmetoden kan også antage form af at bruge en position for hvert billede som i denne form:

 .mBg_2 { 
 bredde: 800px; 
 højde: 500px; 
 baggrund: 
 url (images / barn.png) ikke-gentagelse nederst til højre, 
 url (billeder / clouds.png) ikke-gentagelse øverst til venstre, 
 url (images / grass.png) bund-gentagelse; 
 } 

Ovenstående kode resulterer i følgende som vist i Chrome:

Fig

Som du kan se fra eksemplerne ovenfor, er der to måder at præsentere de lagdelte billeder ved hjælp af CSS3. De næste segmenter på CSS3 vil gennemgå kantbilleder, afrundede hjørner, 3D-tekst, overgang og andre funktioner og funktioner, som kan implementeres i dag.

© Copyright 2020 | mobilegn.com