CSS-baggrundstenografi


Indholdsfortegnelse

    Vis indholdsfortegnelse


CSS-baggrund - stenografi-egenskab

For at forkorte koden er det også muligt at angive alle baggrundsegenskaberne i én enkelt ejendom. Dette kaldes en stenografi egenskab.

I stedet for at skrive:

body {
  background-color: #ffffff;
  background-image: 
  url("img_tree.png");
  background-repeat: no-repeat;
  
  background-position: right top;
}

Du kan bruge stenografiegenskaben baggrund:

Eksempel

Brug stenografiegenskaben til at indstille baggrundsegenskaberne i én erklæring:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>

<p>We have also added a right margin, so that the text will not write over the background image.</p>

</body>
</html>


Når du bruger stenografiegenskaben, er rækkefølgen af egenskabsværdierne:

  • baggrundsfarve

  • baggrundsbillede

  • background-repeat

  • baggrundsvedhæftning

  • baggrundsposition

Det er lige meget, om en af ejendomsværdierne mangler, så længe den andre er i denne rækkefølge. Bemærk, at vi ikke bruger egenskaben background-attachment i eksemplerne ovenfor, da den ikke har en værdi.



Alle CSS-baggrundsegenskaber

background

Indstiller alle baggrundsegenskaberne i én erklæring

background-attachment

Indstiller, om et baggrundsbillede er fast eller ruller med resten af siden

background-clip

Angiver maleområdet for baggrunden

background-color

Indstiller baggrundsfarven for et element

background-image

Indstiller baggrundsbilledet for et element

background-origin

Angiver, hvor baggrundsbilledet/-billederne er placeret

background-position

Indstiller startpositionen for et baggrundsbillede

background-repeat

Indstiller, hvordan et baggrundsbillede skal gentages

background-size

Angiver størrelsen på baggrundsbilledet/-billederne