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 |
