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ì)能。智者懂得隱忍，原諒周?chē)哪切┤?，讓我們?cè)趯捜葜袎汛蟆?lt;/p>
</div>
</body>
</html>執(zhí)行程式嘗試
可以為不同的圖片設(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ì)能。智者懂得隱忍，原諒周?chē)哪切┤?，讓我們?cè)趯捜葜袎汛蟆?lt;/p>
</div>
</body>
</html>執(zhí)行程式嘗試
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>執(zhí)行程式嘗試
<!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>執(zhí)行程式嘗試
#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>執(zhí)行程式嘗試一下
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>執(zhí)行程式嘗試
新的背景屬性
| 順序 | 描述 | CSS |
|---|---|---|
| background-clip | #規(guī)定背景的繪製區(qū)域。 | 3 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域。 | 3 |
| background-size | 規(guī)定背景圖片的尺寸。 | 3 |
