CSS-bakgrunder

Innehållsförteckning

Visa innehållsförteckning

CSS-bakgrundsegenskaperna används för att lägga till bakgrundseffekter för element.

I dessa kapitel kommer du att lära dig om följande CSS-bakgrundsegenskaper:

style="color:crimson">bakgrundsfärg
style="color:crimson">bakgrundsbild
style="color:crimson">background-repeat
style="color:crimson">bakgrundsbilaga
style="color:crimson">bakgrundsposition
style="color:crimson">bakgrund (shorthand-egenskap)

CSS bakgrundsfärg

Egenskapen background-color anger bakgrundsfärgen för ett element.

Exempel

Bakgrundsfärgen för en sida är inställd så här:

body {
  background-color: lightblue;
}

Prova själv →

<!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 specificeras en färg oftast av:

ett giltigt färgnamn - som "röd"
ett HEX-värde - som "#ff0000"
ett RGB-värde - som "rgb(255,0,0)"

Titta på CSS-färgvärden för en komplett lista över möjliga färgvärden.

Andra element

Du kan ställa in bakgrundsfärgen för alla HTML-element:

Exempel

Här kommer elementen <h1>, <p> och <div> att ha olika bakgrundsfärger:

h1 {
  background-color: green;
}

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

Prova själv →

<!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/Transparens

Egenskapen opacity anger opaciteten/transparensen för ett element. Det kan ta ett värde från 0,0 - 1,0. Ju lägre värde, desto mer transparent:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Exempel

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

Prova själv →

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

Obs! När du använder egenskapen opacity för att lägga till transparens i bakgrunden för ett element, alla dess underordnade element ärver samma transparens. Detta kan göra texten inuti ett helt genomskinligt element svårläst.

Transparens med RGBA

Om du inte vill tillämpa opacitet på underordnade element, som i vårt exempel ovan, använd RGBA färgvärden. Följande exempel ställer in opaciteten för bakgrundsfärgen och inte texten:

100% opacity

60% opacity

30% opacity

10% opacity

Du lärde dig från vårt CSS Colors Chapter att du kan använda RGB som ett färgvärde. Förutom RGB, du kan använda ett RGB-färgvärde med en alfa-kanal (RGBA) - som anger opaciteten för en färg.

Ett RGBA-färgvärde anges med: rgba(röd, grön, blå, alfa). De alpha-parametern är ett tal mellan 0,0 (helt transparent) och 1,0 (helt ogenomskinlig).

Tips: Du kommer att lära dig mer om RGBA-färger i vårt kapitel om CSS-färger.

Exempel

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

Prova själv →

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

Egenskapen för CSS-bakgrundsfärg

background-color: Ställer in bakgrundsfärgen för ett element