CSS3 提供更大背景元素控制
了解下面属性
background-image
background-size
background-origin
background-clip
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
div#d1 {
background-image: url(./zzpic14901.jpg), url(./zzpic22409.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="d1">
<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>Code language: HTML, XML (xml)
以上 设置不同背景图片的出现位置 以及重复情况
当然 ，可以使用一条样式来控制。
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}Code language: CSS (css)background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
div#d1 {
background: url(zzpic22409.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;
}Code language: CSS (css)
填充整个区域
图片将会被拉伸 以使得填满整个div
div#d1 {
background: url(zzpic22409.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}Code language: CSS (css)背景图片出现的位置区域
背景图片 可以设置在不同的位置。
content-box, padding-box,和 border-box区域内可以放置背景图像。
这三个区域 分布对应下面的图片所示，默认情况是 content-box
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
div#d1 {
background: url(smiley.gif);
background-repeat: no-repeat;
padding: 30px;
background-position: left;
background-origin: padding-box;
}
</style>
</head>
<body>
<div id="d1">
<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>Code language: HTML, XML (xml)
背景的开始绘制位置
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
#example1 {
border: 10px solid black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px solid black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px solid black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<p>没有背景剪裁 (border-box没有定义):</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>Code language: HTML, XML (xml)
Previous: 椭圆边框