CSS3 ??
CSS3 Background
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中文網(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)常狠不下心來做事，對(duì)自己不夠狠，對(duì)別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p>
<p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會(huì)一笑置之，超然待之，要學(xué)會(huì)轉(zhuǎn)化勢(shì)能。智者懂得隱忍，原諒周圍的那些人，讓我們?cè)趯捜葜袎汛蟆?lt;/p>
</div>
</body>
</html>????? ???? ??? ???
????? ?? ??? ??? ? ????
<!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)常狠不下心來做事，對(duì)自己不夠狠，對(duì)別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p>
<p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會(huì)一笑置之，超然待之，要學(xué)會(huì)轉(zhuǎn)化勢(shì)能。智者懂得隱忍，原諒周圍的那些人，讓我們?cè)趯捜葜袎汛蟆?lt;/p>
</div>
</body>
</html>????? ???? ??? ???
CSS3 ?? ?? ??
?? ??? ??? ????? ?? ???? . CSS3 ???? ?? ??? ??? ???? ?? ??? ?? ???????.
?? ???? CSS3?? ??? ? ???? ??? ???? ?? ???? ??? ?? ??? ? ????. ??? ?? ?? ???? ??? ? ????.
???? ??? ?? ??? ??? ??? ??????.
<!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>人心靈的傷痛若無知己來撫慰，便會(huì)荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。</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中文網(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>人心靈的傷痛若無知己來撫慰，便會(huì)荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。</div>
</body>
</html>????? ???? ??? ???
CSS3? background-Origin ??
background-Origin ??? ?? ???? ?? ??? ????? .
?? ???? ??? ??, ?? ??, ??? ?? ??? ??? ? ????.
<!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>????? ???? ??? ???
CSS3 ?? ?? ??
CSS3? ?? ?? ?? ??? ??? ??? ???? ??? ?????
<!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>沒有背景剪裁 (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>????? ???? ??? ???
??? ?? ??
| ?? | Description | CSS |
|---|---|---|
| Background-clip | ? ??? ??? ??? ?????. | 3 |
| background-origin | ?? ???? ?? ?? ??? ?????. | 3 |
| background-size | ?? ???? ??? ?????. | 3 |
