CSS-baggrunde

Indholdsfortegnelse

Vis indholdsfortegnelse

CSS-baggrundsegenskaberne bruges til at tilføje baggrundseffekter for elementer.

I disse kapitler vil du lære om følgende CSS-baggrundsegenskaber:

style="color:crimson">baggrundsfarve
style="color:crimson">baggrundsbillede
style="color:crimson">background-repeat
style="color:crimson">baggrundsvedhæftning
style="color:crimson">baggrundsposition
style="color:crimson">baggrund (shorthand-egenskab)

CSS baggrundsfarve

Egenskaben baggrundsfarve angiver baggrundsfarven for et element.

Eksempel

Baggrundsfarven på en side er indstillet således:

body {
  background-color: lightblue;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

Med CSS er en farve oftest angivet af:

et gyldigt farvenavn - som "rød"
en HEX-værdi - som "#ff0000"
en RGB-værdi - som "rgb(255,0,0)"

Se på CSS-farveværdier for en komplet liste over mulige farveværdier.

Andre elementer

Du kan indstille baggrundsfarven for alle HTML-elementer:

Eksempel

Her vil <h1>-, <p>- og <div>-elementerne have forskellige baggrundsfarver:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}
p {
  background-color: 
yellow;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Opacitet/Gennemsigtighed

Egenskaben opacity angiver opaciteten/gennemsigtigheden af et element. Det kan tage en værdi fra 0,0 - 1,0. Jo lavere værdi, jo mere gennemsigtig:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Eksempel

div {
  background-color: green;
  opacity: 0.3;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Bemærk: Når du bruger egenskaben opacity til at tilføje gennemsigtighed til baggrunden af et element, alle dets underordnede elementer arve den samme gennemsigtighed. Dette kan gøre teksten i et fuldt gennemsigtigt element svær at læse.

Gennemsigtighed ved hjælp af RGBA

Hvis du ikke ønsker at anvende opacitet til underordnede elementer, som i vores eksempel ovenfor, skal du bruge RGBA farveværdier. Følgende eksempel angiver opaciteten for baggrundsfarven og ikke teksten:

100% opacity

60% opacity

30% opacity

10% opacity

Du lærte fra vores CSS Colors Chapter, at du kan bruge RGB som farveværdi. Ud over RGB, du kan bruge en RGB-farveværdi med en alfa-kanal (RGBA) - som angiver opaciteten for en farve.

En RGBA-farveværdi er angivet med: rgba(rød, grøn, blå, alpha). Det alpha parameter er et tal mellem 0,0 (fuldt gennemsigtig) og 1,0 (fuldstændig uigennemsigtig).

Tip: Du vil lære mere om RGBA-farver i vores CSS-farverkapitel.

Eksempel

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

CSS-baggrundsfarveegenskaben

background-color: Indstiller baggrundsfarven for et element