CSS
bakgrunder

Introduktion

Syntax

• bakgrund-färg: färg | transparent | initial | ärva;
• bakgrund-bild: url | ingen | initial | ärva;
• bakgrundsposition: värde;
• bakgrundsstorlek: <bg- storlek> [<bg- storlek>]
• <bg- storlek>: auto | längd | täcka | innehåller | initial | ärva;
• bakgrund-upprepa: upprepa | repetera-x | repetera-y | ingen upprepa | initial | ärva;
• bakgrund-ursprung: padding-box | border-box | content-box | initial | ärva;
• bakgrund-klipp: border-box | stoppningskorg | content-box | initial | ärva;
• bakgrund-bilaga: bläddra | fast | lokal | initial | ärva;
• bakgrund: bg-färg bg-bildposition / bg-storlek bg-repetera bg-ursprung bg-klipp bg-bilaga initial | ärva;

Anmärkningar

Bakgrundsfärg

background-color ställer in bakgrundsfärgen för ett element med ett färgvärde eller genom nyckelord, till exempel transparent , inherit eller initial .

• transparent , anger att bakgrundsfärgen ska vara transparent. Detta är standard.

• ärver , ärver den här egenskapen från dess överordnade element.

• initial , ställer in den här egenskapen till dess standardvärde.

Detta kan tillämpas på alla element och ::first-letter / ::first-line pseudo-element .

Färger i CSS kan specificeras med olika metoder .

Färgnamn

CSS

div {
  background-color: red;  /* red */
} 

html

<div>This will have a red background</div>

• Exemplet som används ovan är ett av flera sätt som CSS måste representera en enda färg.

Hexfärgkoder

Hexkod används för att beteckna RGB-komponenter i en färg i base-16 hexadecimal notation. # ff0000 är till exempel ljusröd, där den röda komponenten i färgen är 256 bitar (ff) och motsvarande gröna och blå delar av färgen är 0 (00).

Om båda värdena i vart och ett av de tre RGB-kopplingarna (R, G och B) är desamma, kan färgkoden förkortas till tre tecken (den första siffran i varje parning). #ff0000 kan förkortas till #f00 , och #ffffff kan förkortas till #fff .

Hex-notation är inte känslig för fall.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Ett annat sätt att förklara en färg är att använda RGB eller RGBa.

RGB står för rött, grönt och blått, och kräver tre separata värden mellan 0 och 255, mellan parenteser, som motsvarar decimalfärgvärdena för respektive röd, grön och blå.

Med RGBa kan du lägga till en ytterligare alfaparameter mellan 0,0 och 1,0 för att definiera opacitet.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Ett annat sätt att förklara en färg är att använda HSL eller HSLa och liknar RGB och RGBa.

HSL står för nyans, mättnad och lätthet och kallas också ofta HLS:

• Nyans är en grad på färghjulet (från 0 till 360).
• Mättnad är en procentandel mellan 0% och 100%.
• Ljushet är också en procentandel mellan 0% och 100%.

HSLa låter dig lägga till en ytterligare alfaparameter mellan 0,0 och 1.0 för att definiera opacitet.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interaktion med bakgrundsbild

Följande uttalanden är likvärdiga:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

De kommer alla att leda till att den röda färgen visas under bilden, där delar av bilden är transparent eller att bilden inte visas (kanske till följd av background-repeat av background-repeat ).

Observera att följande inte är lika:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Här åsidosätter värdet på background din background-image .

För mer information om background , se Background Shorthand

Bakgrundsbild

Egenskapen background-image används för att specificera en bakgrundsbild som ska tillämpas på alla matchade element. Som standard lutas denna bild för att täcka hela elementet, exklusive marginal.

.myClass {
  background-image: url('/path/to/image.jpg');
}

För att använda flera bilder som background-image , definiera kommaseparerad url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Bilderna kommer att staplas enligt deras ordning med den första deklarerade bilden ovanpå de andra och så vidare.

Mer CSS för bakgrundsbild

Följande attribut är mycket användbara och nästan väsentliga också.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Bakgrundsgradienter

Lutningar är nya bildtyper, tillagda i CSS3. Som en bild är gradienter in med background-image egendom eller background stenografi.

Det finns två typer av gradientfunktioner, linjära och radiella. Varje typ har en icke-upprepande variant och en upprepande variant:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

linjär-gradient ()

En linear-gradient har följande syntax

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Till exempel skapar detta en linjär lutning som börjar från höger och övergångar från rött till blått

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Du kan skapa en diagonal lutning genom att ange både en horisontell och vertikal startposition.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

Det är möjligt att specificera valfritt antal färgstopp i en lutning genom att separera dem med komma-tecken. Följande exempel skapar en lutning med 8 färgstopp

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

radial-gradient ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Upprepa lutningar

Upprepande gradientfunktioner tar samma argument som exemplen ovan, men plattar lutningen över elementets bakgrund.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Observera att HEX-, RGB-, RGBa-, HSL- och HSLa-färgkoder kan användas i stället för färgnamn. Färgnamn användes för att illustrera. Observera också att syntaxen med radiell gradient är mycket mer komplex än linjär gradient, och en förenklad version visas här. För MDF-dokument för en fullständig förklaring och specifikationer

Bakgrund Kortfattad

background kan användas för att ställa in en eller flera bakgrundsrelaterade egenskaper:

Ordningen på värdena spelar ingen roll och varje värde är valfritt

Syntax

Syntaxen för den korta kortdeklarationen är:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

exempel

background: red;

Ställ bara in en background-color med det red värdet.

background: border-box red;

Ställa in ett background-clip till gränsruta och en background-color till rött.

background: no-repeat center url("somepng.jpg");

Ställer in en background-repeat till ingen upprepning, background-origin till centrum och en background-image till en bild.

background: url('pattern.png') green;

I det här exemplet skulle elementets background-color ställas in på green med pattern.png , om det är tillgängligt, överlagrat på färgen, upprepas så ofta som nödvändigt för att fylla elementet. Om pattern.png innehåller någon transparens kommer den green färgen att synas bakom den.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

I det här exemplet har vi en svart bakgrund med en bild 'picture.png' upptill, bilden upprepas inte i endera axeln och är placerad i det övre vänstra hörnet. Positionen / efter är att kunna inkludera storleken på bakgrundsbilden som i detta fall är inställd på 600px bredd och auto för höjden. Det här exemplet kan fungera bra med en funktionsbild som kan bleka till en fast färg.

OBS: Användning av den korta bakgrundsegenskapen återställer alla tidigare inställda värden för bakgrundseegenskaper, även om inget värde anges. Om du bara vill ändra ett tidigare inställt värde för bakgrundseegenskaper använder du en longhand-egenskap istället.

Bakgrundsposition

Egenskapen background-position används för att specificera startpositionen för en bakgrundsbild eller gradient

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

Positionen ställs in med en X- och Y -koordinat och ställs in med någon av enheterna som används inom CSS.

Enheter i CSS kan specificeras med olika metoder (se här ).

Egenskaper för Longhand-bakgrundsposition

Förutom den korta egenskapen ovan, kan man också använda longhand-bakgrundsegenskaperna background-position-x och background-position-y . Dessa låter dig styra x- eller y-positionerna separat.

OBS: Detta stöds i alla webbläsare utom Firefox (version 31-48) 2 . Firefox 49, som kommer att släppas september 2016, kommer att stödja dessa egenskaper. Fram till dess finns det ett Firefox-hack i detta Stack Overflow-svar.

Bakgrundsbilaga

Egenskapen för bakgrundsfästning anger om en bakgrundsbild är fixerad eller rullar med resten av sidan.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

exempel

bakgrund-bilaga: bläddra

Standardbeteendet, när kroppen rullas, rullar bakgrunden med det:

body {
  background-image: url('image.jpg');
  background-attachment: scroll;
}

bakgrund-bilaga: fast

Bakgrundsbilden kommer att vara fixerad och kommer inte att röra sig när kroppen rullas:

body {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

bakgrund-bilaga: lokalt

Bakgrundsbilden av div kommer att bläddra när innehållet i div rullas.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

Upprepa bakgrunden

Egenskapen bakgrundsupprepning anger om / hur en bakgrundsbild ska upprepas.

Som standard upprepas en bakgrundsbild både vertikalt och horisontellt.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Så här ser en background-repeat: repeat-y ser ut:

Bakgrundsfärg med opacitet

Om du ställer in opacity på ett element kommer det att påverka alla dess barnelement. För att ställa in en opacitet bara på bakgrunden till ett element måste du använda RGBA-färger. Följande exempel har en svart bakgrund med 0,6 opacitet.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Flera bakgrundsbild

I CSS3 kan vi stapla flera bakgrunder i samma element.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Bilderna staplas ovanpå varandra med den första bakgrunden ovanpå och den sista bakgrunden på baksidan. img_1 kommer att vara på toppen, img_2 och img_3 är på botten.

Vi kan också använda bakgrundsarkortegenskaper för detta:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

Vi kan också stapla bilder och lutningar:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• demo

Egenskapen bakgrunds-ursprung

Egenskapen bakgrund-ursprung anger var bakgrunden är placerad.

Obs! Om egenskapen background-attachment är inställd på fixed har den här egenskapen ingen effekt.

Standardvärde: padding-box

Möjliga värden:

• padding-box - Positionen är relativt paddboxen
• border-box - Positionen är relativt gränslådan
• content-box - Positionen är relativt innehållsrutan
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

html

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Resultat:

Mer:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Bakgrundsklipp

Definition och användning: Egenskapen background-clip anger bakgrundens målningsområde.

Standardvärde: border-box

värden

• border-box är standardvärdet. Detta gör att bakgrunden kan sträcka sig hela vägen till ytterkanten av elementets kant.
• padding-box klämmer fast bakgrunden vid ytterkanten av elementets stoppning och låter den inte sträcka sig in i gränsen;
• content-box klipper bakgrunden i kanten av innehållsrutan.
• inherit tillämpar föräldrarnas inställning på det valda elementet.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

html

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Bakgrundsstorlek

Generell översikt

Egenskapen background-size möjligt att styra skalningen av background-image . Det tar upp till två värden som bestämmer skalan / storleken på den resulterande bilden i vertikal och horisontell riktning. Om egenskapen saknas anses den vara auto i både width och height .

auto behåller bildens bildförhållande, om den kan bestämmas. Höjden är valfri och kan betraktas som auto . Därför, på en 256 px × 256 px bild, skulle alla följande inställningar för background-size ge en bild med höjd och bredd 50 px:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Så om vi började med följande bild (som har den nämnda storleken 256 px × 256 px),

vi kommer att hamna med 50 px × 50 px på användarens skärm, som finns i bakgrunden till vårt element:

Man kan också använda procentvärden för att skala bilden med respekt för elementet. Följande exempel ger en bild på 200 px × 133 px:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

Beteendet beror på background-origin .

Håller bildförhållandet

Det sista exemplet i föregående avsnitt förlorade sitt ursprungliga bildkvot. Cirkeln fick en ellips, fyrkanten i en rektangel, triangeln i en annan triangel.

Längd eller procentuell metod är inte tillräckligt flexibel för att hålla bildförhållandet hela tiden. auto hjälper inte, eftersom du kanske inte vet vilken dimension av ditt element som blir större. För att täcka vissa områden med en bild (och korrekt bildförhållande) fullständigt eller för att innehålla en bild med rätt bildförhållande helt i ett bakgrundsområde ger värdena, contain och cover extra funktionalitet.

Äggplanering för contain och cover

Ledsen för det dåliga ordspelet, men vi kommer att använda en bild av dagen av Biswarup Ganguly för demonstration. Låt oss säga att det här är din skärm och det grå området är utanför din synliga skärm. För demonstration kommer vi att anta ett förhållande på 16 × 9.

Vi vill använda den nämnda bilden av dagen som bakgrund. Men vi beskärde bilden till 4x3 av någon anledning. Vi kan ställa in background-size på viss fast längd, men vi kommer att fokusera på contain och cover . Observera att jag antar också att vi inte mangel bredd och / eller höjd body .

contain

contain

Skala bilden, medan du bevarar dess inneboende bildförhållande (om någon), till den största storleken så att både bredd och höjd kan passa in i bakgrundspositioneringsområdet.

Detta säkerställer att bakgrundsbilden alltid finns helt i bakgrundspositioneringsområdet, men det kan finnas något tomt utrymme fylld med din background-color i det här fallet:

cover

cover

Skala bilden, medan du bevarar dess inneboende bildförhållande (om någon), till den minsta storleken så att både bredd och höjd helt kan täcka bakgrundspositioneringsområdet.

Detta ser till att bakgrundsbilden täcker allt. Det kommer inte att finnas någon synlig background-color , men beroende på skärmens förhållande kan en stor del av din bild avskäras:

Demonstration med faktisk kod

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

bakgrund-blandning-läge Egenskap

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

Se resultat här: https://jsfiddle.net/MadalinaTn/y69d28Lb/

CSS Syntax: bakgrund-blandning-läge: normal | multiplicera | skärm | överlägg | mörkare | lättare | färg-dodge | mättnad | färg | ljusstyrka;