CSS3 背景
CSS3 背景
CSS3中包含幾個(gè)新的背景屬性，提供更大背景元素控制。
在本章您將了解以下背景屬性：
background-image
background-size
background-origin
background-clip
CSS3 background-image屬性
CSS3中可以通過(guò)background-image屬性添加背景圖片。
不同的背景圖像和圖像用逗號(hào)隔開(kāi)，所有的圖片中顯示在最頂端的為第一張。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>你是否經(jīng)常狠不下心來(lái)做事，對(duì)自己不夠狠，對(duì)別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過(guò)的更好，總是纏綿過(guò)往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p>
<p>別為小小的委屈難過(guò)，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會(huì)一笑置之，超然待之，要學(xué)會(huì)轉(zhuǎn)化勢(shì)能。智者懂得隱忍，原諒周圍的那些人，讓我們?cè)趯捜葜袎汛蟆?lt;/p>
</div>
</body>
</html>運(yùn)行程序嘗試一下
可以給不同的圖片設(shè)置多個(gè)不同的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>你是否經(jīng)常狠不下心來(lái)做事，對(duì)自己不夠狠，對(duì)別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過(guò)的更好，總是纏綿過(guò)往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p>
<p>別為小小的委屈難過(guò)，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會(huì)一笑置之，超然待之，要學(xué)會(huì)轉(zhuǎn)化勢(shì)能。智者懂得隱忍，原諒周圍的那些人，讓我們?cè)趯捜葜袎汛蟆?lt;/p>
</div>
</body>
</html>運(yùn)行程序嘗試一下
CSS3 background-size 屬性
background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實(shí)際大小決定。
CSS3中可以指定背景圖片，讓我們重新在不同的環(huán)境中指定背景圖片的大小。您可以指定像素或百分比大小。
你指定的大小是相對(duì)于父元素的寬度和高度的百分比的大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>人心靈的傷痛若無(wú)知己來(lái)?yè)嵛?，便?huì)荒蕪;人的歡樂(lè)若知己來(lái)共享，再多的快樂(lè)也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來(lái)排解。人若沒(méi)有知己，心靈便是一片怎樣的荒涼。</p>
<p>原始圖片: <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" alt="Flowers" width="224" height="162"></p>
</body>
</html>運(yùn)行程序嘗試一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>人心靈的傷痛若無(wú)知己來(lái)?yè)嵛?，便?huì)荒蕪;人的歡樂(lè)若知己來(lái)共享，再多的快樂(lè)也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來(lái)排解。人若沒(méi)有知己，心靈便是一片怎樣的荒涼。</div>
</body>
</html>運(yùn)行程序嘗試一下
CSS3的background-Origin屬性
background-Origin屬性指定了背景圖像的位置區(qū)域。
content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>運(yùn)行程序嘗試一下
CSS3 background-clip屬性
CSS3中background-clip背景剪裁屬性是從指定位置開(kāi)始繪制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>沒(méi)有背景剪裁 (border-box沒(méi)有定義):</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>運(yùn)行程序嘗試一下
新的背景屬性
| 順序 | 描述 | CSS |
|---|---|---|
| background-clip | 規(guī)定背景的繪制區(qū)域。 | 3 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域。 | 3 |
| background-size | 規(guī)定背景圖片的尺寸。 | 3 |
