I det här kapitlet kommer du att lära dig hur du lägger till flera bakgrundsbilder till ett element.
Du kommer också att lära dig om följande egenskaper:
background-size
background-origin
background-clip
In this chapter you will learn how to add multiple background images to one element.
You will also learn about the following properties:
background-size
background-origin
background-clip
CSS låter dig lägga till flera bakgrundsbilder för ett element, genom egenskapen background-image
.
De olika bakgrundsbilderna separeras med kommatecken, och bilderna är det staplade på varandra, där den första bilden är närmast betraktaren.
Följande exempel har två bakgrundsbilder, den första bilden är en blomma (justerad till botten och höger) och den andra bilden är en pappersbakgrund (justerad till det övre vänstra hörnet):
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<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>
</body>
</html>
Flera bakgrundsbilder kan specificeras med antingen individen bakgrundsegenskaper (enligt ovan) eller egenskapen bakgrund
.
Följande exempel använder stenografiegenskapen background
(samma resultat som exemplet ovan):
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<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>
</body>
</html>
CSS-egenskapen background-size
låter dig ange storleken på bakgrundsbilder.
Storleken kan anges i längder, procent eller genom att använda en av de två nyckelord: innehålla eller täcka.
Följande exempel ändrar storleken på en bakgrundsbild till mycket mindre än originalbilden (med hjälp av pixlar):
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Här är koden:
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background: url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}
#example2 {
border: 1px solid black;
background: url(img_flwr.gif);
background-repeat: no-repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>The background-size Property</h1>
<p>Resized background-image:</p>
<div id="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>Original size of the background-image:</p>
<div id="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>
</body>
</html>
De två andra möjliga värdena för bakgrundsstorlek
är
contain
cover
Nyckelordet contain
skalar bakgrundsbilden så att den blir så stor som möjligt (men både dess bredd och höjd måste passa inom innehållsområdet). Som sådan, beroende på proportionerna av bakgrunden bild och bakgrundspositioneringsområdet kan det finnas vissa områden av bakgrunden som inte täcks av bakgrundsbilden.
Nyckelordet omslag
skalar bakgrundsbilden så att innehållsområdet är helt täckt av bakgrundsbilden (både dess bredd och höjd är lika med eller överskrida innehållsområdet). Som sådan kanske vissa delar av bakgrundsbilden inte är det synlig i bakgrundspositioneringsområdet.
Följande exempel illustrerar användningen av contain
och omslag
:
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover; background-repeat: no-repeat;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
.div2 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
.div3 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>The background-size Property</h1>
<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">
</body>
</html>
Egenskapen background-size
accepterar också flera värden för bakgrundsstorlek (med hjälp av en kommaseparerad lista), när du arbetar med flera bakgrunder.
Följande exempel har tre bakgrundsbilder specificerade, med olika bakgrundsstorleksvärde för varje bild:
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
background-size: 50px, 130px, auto;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<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>
</body>
</html>
Nu vill vi ha en bakgrundsbild på en hemsida som täcker hela webbläsarfönster hela tiden.
Kraven är följande:
Fyll hela sidan med bilden (inget blanksteg)
Skala bilden efter behov
Centrera bilden på sidan
Orsak inte rullningslister
Följande exempel visar hur man gör; Använd elementet <html> (elementet <html> är alltid åtminstone höjden på webbläsarfönstret). Sätt sedan en fast och centrerad bakgrund på den. Justera sedan dess storlek med egenskap i bakgrundsstorlek:
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Du kan också använda olika bakgrundsegenskaper på en <div> för att skapa en hjältebild (en stor bild med text) och placera den där du vill.
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
</body>
</html>
CSS-egenskapen background-origin
anger var bakgrundsbilden är placerad.
Fastigheten har tre olika värden:
border-box - bakgrundsbilden börjar från det övre vänstra hörnet av kanten
padding-box - (standard) bakgrundsbilden börjar från det övre vänstra hörnet av utfyllnadskanten
content-box - bakgrundsbilden börjar från det övre vänstra hörnet av innehållet
Följande exempel illustrerar egenskapen background-origin
:
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
#example2 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>The background-origin Property</h1>
<p>No background-origin (padding-box is default):</p>
<div id="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 id="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 id="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>
</body>
</html>
CSS-egenskapen background-clip
anger målningsområdet för bakgrunden.
Fastigheten har tre olika värden:
border-box - (standard) bakgrunden målas till kantens yttre kant
padding-box - bakgrunden är målad till utsidan av vadderingen
content-box - bakgrunden är målad i innehållsrutan
Följande exempel illustrerar egenskapen background-clip
:
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>The background-clip Property</h1>
<p>No background-clip (border-box is default):</p>
<div id="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>
</div>
<p>background-clip: padding-box:</p>
<div id="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>
</div>
<p>background-clip: content-box:</p>
<div id="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>
</div>
</body>
</html>
En förkortningsegenskap för att ställa in alla bakgrundsegenskaper i en deklaration
Anger målningsområdet för bakgrunden
Anger en eller flera bakgrundsbilder för ett element
Anger var bakgrundsbilden/-bilderna är placerade
Anger storleken på bakgrundsbilden/-erna