CSS3 background
CSS3 Background
CSS3 includes several new background properties that provide greater control over background elements.
In this chapter you will learn about the following background properties:
background-image
background-size
background-origin
background-clip
##CSS3 background-image Attribute
In CSS3, you can add a background image through the background-image attribute. Different background images and images are separated by commas, and the one displayed at the top of all images is the first one.<!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>Run the program and try itYou can set multiple different attributes for different pictures
<!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>Run the program and try itCSS3 background-size attribute
background-size specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image. Background images can be specified in CSS3, allowing us to re-specify the size of the background image in different environments. You can specify the size in pixels or percentage. The size you specify is a percentage of the width and height of the parent element.<!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>Run the program and try it<!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>Run the program and try it
CSS3 background-Origin attribute
The background-Origin attribute specifies the location area of ??the background image. Background images can be placed in the content-box, padding-box, and border-box areas.<!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>Run the program and try itCSS3 background-clip property
The background-clip background clipping property in CSS3 starts drawing from the specified position
<!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>Run the program to try it
New background attributes
| Order | Description | CSS |
|---|---|---|
| background-clip | Specifies the drawing area of ??the background. | 3 |
| background-origin | Specifies the positioning area of ??the background image. | 3 |
| background-size | Specifies the size of the background image. | 3 |
