CSS
Achtergronden

Invoering

Syntaxis

• achtergrondkleur: kleur | transparant | voorletter | erven;
• achtergrondafbeelding: url | geen | voorletter | erven;
• achtergrond-positie: waarde;
• achtergrondgrootte: <bg-size> [<bg-size>]
• <bg-size>: auto | lengte | cover | bevatten | voorletter | erven;
• achtergrond-herhalen: herhalen | herhaal-x | herhaal-y | niet herhalen | voorletter | erven;
• achtergrond-oorsprong: padding-box | border-box | inhoud-vak | voorletter | erven;
• achtergrond-clip: border-box | opvuldoos | inhoud-vak | voorletter | erven;
• achtergrond-bijlage: scroll | vast | lokaal | voorletter | erven;
• achtergrond: bg-kleur bg-afbeelding positie / bg-formaat bg-herhaling bg-oorsprong bg-clip bg-bijlage initiaal | erven;

Opmerkingen

Achtergrond kleur

De eigenschap background-color stelt de achtergrondkleur van een element in met behulp van een kleurwaarde of via trefwoorden, zoals transparent , inherit of initial .

• transparant , geeft aan dat de achtergrondkleur transparant moet zijn. Dit is standaard.

• erven , neemt deze eigenschap over van het bovenliggende element.

• aanvankelijk, stelt deze eigenschap in op de standaardwaarde.

Dit kan worden toegepast op alle elementen, en ::first-letter / ::first-line pseudo-elementen .

Kleuren in CSS kunnen op verschillende manieren worden gespecificeerd.

Kleurnamen

CSS

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

HTML

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

• Het hierboven gebruikte voorbeeld is een van de verschillende manieren waarop CSS een enkele kleur moet vertegenwoordigen.

Hex kleurcodes

Hex-code wordt gebruikt om RGB-componenten van een kleur aan te duiden in hexadecimale notatie met basis-16. # ff0000 is bijvoorbeeld helderrood, waarbij de rode component van de kleur 256 bits (ff) is en de bijbehorende groene en blauwe delen van de kleur 0 (00) zijn.

Als beide waarden in elk van de drie RGB-paren (R, G en B) hetzelfde zijn, kan de kleurcode worden ingekort in drie tekens (het eerste cijfer van elke paar). #ff0000 kan worden ingekort tot #f00 en #ffffff kan worden ingekort tot #fff .

Hex-notatie is niet hoofdlettergevoelig.

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

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

RGB / RGBa

Een andere manier om een kleur te declareren is door RGB of RGBa te gebruiken.

RGB staat voor Rood, Groen en Blauw en vereist drie afzonderlijke waarden tussen 0 en 255, tussen haakjes geplaatst, die overeenkomen met de decimale kleurwaarden voor respectievelijk rood, groen en blauw.

Met RGBa kunt u een extra alfaparameter tussen 0,0 en 1,0 toevoegen om de dekking te definiëren.

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

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

HSL / HSLa

Een andere manier om een kleur te declareren is door HSL of HSLa te gebruiken en is vergelijkbaar met RGB en RGBa.

HSL staat voor tint, verzadiging en lichtheid en wordt ook vaak HLS genoemd:

• Tint is een graad op het kleurenwiel (van 0 tot 360).
• Verzadiging is een percentage tussen 0% en 100%.
• Lichtheid is ook een percentage tussen 0% en 100%.

Met HSLa kunt u een extra alfaparameter tussen 0,0 en 1,0 toevoegen om de dekking te definiëren.

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

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

Interactie met achtergrondafbeelding

De volgende verklaringen zijn allemaal gelijkwaardig:

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);
}

Ze leiden er allemaal toe dat de rode kleur onder de afbeelding wordt weergegeven, waarbij de delen van de afbeelding transparant zijn of de afbeelding niet wordt weergegeven (misschien als gevolg van background-repeat ).

Merk op dat het volgende niet equivalent is:

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

Hier overschrijft de waarde van de background uw background-image .

Voor meer informatie over de background woning, zie Achtergrond Shorthand

Achtergrond afbeelding

De eigenschap background-image wordt gebruikt om een achtergrondafbeelding op te geven die op alle overeenkomende elementen moet worden toegepast. Standaard is deze afbeelding naast elkaar geplaatst om het hele element te dekken, exclusief marge.

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

Als u meerdere afbeeldingen als background-image wilt gebruiken, definieert u door komma's gescheiden url()

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

De afbeeldingen worden gestapeld volgens hun volgorde met de eerste aangegeven afbeelding bovenop de andere enzovoort.

Meer CSS voor achtergrondafbeelding

De volgende attributen zijn erg nuttig en bijna ook essentieel.

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;

Achtergrond verlopen

Verlopen zijn nieuwe afbeeldingstypen, toegevoegd in CSS3. Als een afbeelding worden verlopen ingesteld met de eigenschap background-image , of de afkorting background .

Er zijn twee soorten gradiëntfuncties, lineair en radiaal. Elk type heeft een niet-herhalende variant en een herhalende variant:

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

lineaire gradiënt ()

Een linear-gradient heeft de volgende syntaxis

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

Dit creëert bijvoorbeeld een lineair verloop dat van rechts begint en overgaat van rood naar blauw

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

U kunt een diagonal verloop maken door zowel een horizontale als een verticale startpositie aan te geven.

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

Het is mogelijk om een willekeurig aantal kleurstops in een verloop op te geven door ze te scheiden met komma's. De volgende voorbeelden maken een verloop met 8 kleurstops

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

radiaal-gradiënt ()

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

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

Gradiënten herhalen

Voor het herhalen van gradiëntfuncties zijn dezelfde argumenten nodig als in de bovenstaande voorbeelden, maar wordt het verloop over de achtergrond van het element geplaatst.

.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% );
}

Merk op dat HEX-, RGB-, RGBa-, HSL- en HSLa-kleurcodes kunnen worden gebruikt in plaats van kleurnamen. Kleurnamen werden ter illustratie gebruikt. Merk ook op dat de syntaxis van het radiaal verloop veel complexer is dan het lineair verloop, en hier wordt een vereenvoudigde versie getoond. Zie de MDN-documenten voor een volledige uitleg en specificaties

Achtergrond steno

De background kan worden gebruikt om een of meer achtergrondgerelateerde eigenschappen in te stellen:

De volgorde van de waarden maakt niet uit en elke waarde is optioneel

Syntaxis

De syntaxis van de achtergrond steno-verklaring is:

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

Voorbeelden

background: red;

Eenvoudig een background-color instellen met de red waarde.

background: border-box red;

Een background-clip op border-box en een background-color op rood.

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

Stelt een background-repeat op niet-herhalen, background-origin in het midden en een background-image op een afbeelding.

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

In dit voorbeeld zou de background-color van het element worden ingesteld op green met pattern.png , als deze beschikbaar is, over de kleur heen worden geplaatst, zo vaak als nodig wordt herhaald om het element te vullen. Als pattern.png transparantie bevat, is de green kleur erachter zichtbaar.

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

In dit voorbeeld hebben we een zwarte achtergrond met een afbeelding 'picture.png' bovenaan, de afbeelding herhaalt zich niet in beide assen en bevindt zich in de linkerbovenhoek. De / achter de positie moet de grootte van de achtergrondafbeelding kunnen bevatten, die in dit geval is ingesteld op 600px breedte en auto voor de hoogte. Dit voorbeeld kan goed werken met een functieafbeelding die kan vervagen tot een effen kleur.

OPMERKING: Gebruik van de steno-achtergrondeigenschap reset alle eerder ingestelde achtergrondeigenschapswaarden, zelfs als er geen waarde is opgegeven. Als u alleen een eerder ingestelde achtergrondeigenschap wilt wijzigen, gebruikt u in plaats daarvan een longhand-eigenschap.

Achtergrond positie

De eigenschap background-position wordt gebruikt om de startpositie voor een achtergrondafbeelding of verloop op te geven

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

De positie wordt ingesteld met behulp van een X- en Y -coördinaat en wordt ingesteld met behulp van een van de binnen CSS gebruikte eenheden.

Eenheden in CSS kunnen op verschillende manieren worden gespecificeerd (zie hier ).

Longhand-achtergrondpositie-eigenschappen

Naast de steno-eigenschap hierboven, kan men ook de longhand-achtergrondeigenschappen background-position-x en background-position-y . Hiermee kunt u de x- of y-posities afzonderlijk regelen.

OPMERKING: Dit wordt ondersteund in alle browsers behalve Firefox (versies 31-48) 2 . Firefox 49, worden vrijgegeven september 2016, zullen deze eigenschappen te ondersteunen. Tot die tijd is er een Firefox-hack in dit Stack Overflow-antwoord.

Achtergrond bijlage

De eigenschap achtergrondbijlage stelt in of een achtergrondafbeelding vast is of met de rest van de pagina schuift.

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

Voorbeelden

achtergrond-bijlage: bladeren

Het standaardgedrag, wanneer het lichaam wordt geschoven, scrolt de achtergrond mee:

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

achtergrond-bijlage: vast

De achtergrondafbeelding wordt vastgesteld en beweegt niet wanneer het lichaam wordt gescrold:

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

achtergrond-bijlage: lokaal

De achtergrondafbeelding van de div zal scrollen wanneer de inhoud van de div wordt verschoven.

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

achtergrond herhaling

De eigenschap background-repeat stelt in of / hoe een achtergrondafbeelding wordt herhaald.

Standaard wordt een achtergrondafbeelding zowel verticaal als horizontaal herhaald.

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

Dit is hoe een background-repeat: repeat-y eruit ziet:

Achtergrondkleur met dekking

Als u de opacity van een element instelt, heeft dit invloed op alle onderliggende elementen. Als u een dekking alleen op de achtergrond van een element wilt instellen, moet u RGBA-kleuren gebruiken. Het volgende voorbeeld heeft een zwarte achtergrond met een dekking van 0,6.

/* 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)";

Meerdere achtergrondafbeelding

In CSS3 kunnen we meerdere achtergrond in hetzelfde element stapelen.

#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;
}

Afbeeldingen worden op elkaar gestapeld met de eerste achtergrond bovenaan en de laatste achtergrond achteraan. img_1 staat bovenaan, de img_2 en img_3 onderaan.

We kunnen hiervoor ook de eigenschap steno voor achtergrond gebruiken:

#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;
}

We kunnen ook afbeeldingen en verlopen stapelen:

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

• demonstratie

De eigenschap oorsprong van achtergrond

De eigenschap background-origin geeft aan waar de achtergrondafbeelding wordt geplaatst.

Opmerking: als de eigenschap voor background-attachment is ingesteld op fixed , heeft deze eigenschap geen effect.

Standaardwaarde: padding-box

Mogelijke waarden:

• padding-box - De positie is relatief ten opzichte van de paddingbox
• border-box - De positie is relatief ten opzichte van de border-box
• content-box - De positie is relatief ten opzichte van het content-vak
• 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>

Resultaat:

Meer:

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

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

Achtergrond Clip

Definitie en gebruik: de eigenschap background-clip geeft het tekengebied van de achtergrond aan.

Standaardwaarde: border-box

waarden

• border-box is de standaardwaarde. Hierdoor kan de achtergrond zich helemaal tot aan de buitenrand van de rand van het element uitstrekken.
• padding-box knipt de achtergrond aan de buitenrand van de padding van het element en laat deze niet tot in de rand reiken;
• content-box knipt de achtergrond aan de rand van het content-vak.
• inherit past de instelling van het bovenliggende element toe op het geselecteerde element.

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>

Achtergrondgrootte

Algemeen overzicht

Met de eigenschap background-size kan men de schaal van de background-image regelen. Er zijn maximaal twee waarden nodig, die de schaal / grootte van de resulterende afbeelding in verticale en horizontale richting bepalen. Als de eigenschap ontbreekt, wordt deze geacht zowel in de width als in de height auto te zijn.

auto behoudt de beeldverhouding van het beeld, als dit kan worden bepaald. De hoogte is optioneel en kan als auto worden beschouwd. Daarom zouden bij een afbeelding van 256 px × 256 px alle volgende instellingen voor de background-size een afbeelding opleveren met een hoogte en breedte van 50 px:

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

Dus als we zijn begonnen met de volgende afbeelding (die de genoemde grootte heeft van 256 px × 256 px),

we eindigen met een 50 px × 50 px op het scherm van de gebruiker, op de achtergrond van ons element:

Men kan ook percentagewaarden gebruiken om de afbeelding te schalen ten opzichte van het element. Het volgende voorbeeld zou een getekende afbeelding van 200 px × 133 px opleveren:

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

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

    padding: 0;
    margin: 0;
}

Het gedrag is afhankelijk van de background-origin van de background-origin .

De beeldverhouding behouden

Het laatste voorbeeld in de vorige sectie verloor zijn oorspronkelijke beeldverhouding. De cirkel kwam in een ellips, het vierkant in een rechthoek, de driehoek in een andere driehoek.

De lengte- of percentagebenadering is niet flexibel genoeg om de beeldverhouding te allen tijde te behouden. auto helpt niet, omdat je misschien niet weet welke dimensie van je element groter zal zijn. Om echter bepaalde gebieden met een afbeelding (en de juiste beeldverhouding) volledig te bedekken of om een afbeelding met de juiste beeldverhouding volledig in een achtergrondgebied te contain , bieden de waarden, contain en cover de extra functionaliteit.

Eggsplanation voor contain en cover

Sorry voor de slechte woordspeling, maar we gaan een foto van de dag van Biswarup Ganguly gebruiken voor demonstratie. Laten we zeggen dat dit uw scherm is en dat het grijze gebied zich buiten uw zichtbare scherm bevindt. Ter demonstratie gaan we uit van een verhouding van 16 × 9.

We willen de bovengenoemde foto van de dag als achtergrond gebruiken. We hebben de afbeelding om een of andere reden echter bijgesneden tot 4x3. We kunnen de eigenschap voor de background-size instellen op een vaste lengte, maar we zullen ons concentreren op contain en cover . Merk op dat ik ook aanneem dat we de breedte en / of hoogte van het body niet hebben gemangeld.

contain

contain

Schaal de afbeelding, met behoud van de intrinsieke beeldverhouding (indien aanwezig), tot de grootste grootte, zodat zowel de breedte als de hoogte binnen het positioneringsgebied van de achtergrond passen.

Dit zorgt ervoor dat de achtergrondafbeelding altijd volledig is opgenomen in het achtergrondpositioneergebied, maar er kan in dit geval wat lege ruimte zijn gevuld met uw background-color :

cover

cover

Schaal de afbeelding, met behoud van de intrinsieke beeldverhouding (indien aanwezig), tot de kleinste grootte, zodat zowel de breedte als de hoogte het positioneringsgebied van de achtergrond volledig kunnen bedekken.

Dit zorgt ervoor dat de achtergrondafbeelding alles bedekt. Er is geen zichtbare background-color , maar afhankelijk van de schermverhouding kan een groot deel van uw afbeelding worden afgesneden:

Demonstratie met actuele code

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>

background-blend-mode Eigenschap

.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>

Zie resultaat hier: https://jsfiddle.net/MadalinaTn/y69d28Lb/

CSS-syntaxis: achtergrond-overvloeimodus: normaal | vermenigvuldigen | scherm | overlay | donkerder maken verlichten | kleur-ontwijken | verzadiging | kleur | helderheid;