CSS3 背景
CSS3 背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
background-image
background-size
background-origin
background-clip
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
background-image: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg), url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>正能量</h1>
<p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p>
<p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p>
</div>
</body>
</html>运行程序尝试一下
可以给不同的图片设置多个不同的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
background: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) right bottom no-repeat, url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>正能量</h1>
<p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p>
<p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p>
</div>
</body>
</html>运行程序尝试一下
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</p>
<p>原始图片: <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" alt="Flowers" width="224" height="162"></p>
</body>
</html>运行程序尝试一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</div>
</body>
</html>运行程序尝试一下
CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
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.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
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.
</div>
</body>
</html>运行程序尝试一下
CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
border: 10px dotted #e53f3f;
padding:35px;
background: yellow;
}
#example2 {
border: 10px dotted #4fcfc4;
padding:35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted #8ceed8;
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>运行程序尝试一下
新的背景属性
| 顺序 | 描述 | CSS |
|---|---|---|
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
