CSS3の背景
CSS3 Background
CSS3 には、背景要素をより詳細(xì)に制御できるようにするための、いくつかの新しい背景プロパティが含まれています。
この章では、次の背景プロパティについて學(xué)習(xí)します:
background-image
background-size
background-origin
background-clip
CSS3背景畫像屬性
CSS3 では、背景畫像屬性を介して背景畫像を追加できます。
異なる背景畫像と畫像はカンマで區(qū)切られており、すべての畫像の一番上に表示される畫像が最初の畫像となります。
<!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)常狠不下心來做事，對自己不夠狠，對別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠也活不出自己</p>
<p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會一笑置之，超然待之，要學(xué)會轉(zhuǎn)化勢能。智者懂得隱忍，原諒周圍的那些人，讓我們在寬容中壯大。</p>
</div>
</body>
</html>プログラムを?qū)g行して試してください
異なる畫像に複數(shù)の異なる屬性を設(shè)定できます
<!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)常狠不下心來做事，對自己不夠狠，對別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠也活不出自己</p>
<p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會一笑置之，超然待之，要學(xué)會轉(zhuǎn)化勢能。智者懂得隱忍，原諒周圍的那些人，讓我們在寬容中壯大。</p>
</div>
</body>
</html>プログラムを?qū)g行して試してください
CSS3のbackground-size屬性
background-sizeはサイズを指定します背景畫像のCSS3 より前は、背景畫像のサイズは畫像の実際のサイズによって決まりました。
CSS3で背景畫像を指定できるため、環(huán)境ごとに背景畫像のサイズを再指定できます。サイズはピクセルまたはパーセンテージで指定できます。
指定するサイズは、親要素の幅と高さのパーセンテージです。
<!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>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。</p>
<p>原始圖片: <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" alt="Flowers" width="224" height="162"></p>
</body>
</html>プログラムを?qū)g行して試してください
<!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>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個人的痛苦要找人傾訴，一個人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。</div>
</body>
</html>プログラムを?qū)g行して試してください
CSS3のbackground-Origin屬性
background-Origin屬性は、背景畫像の位置領(lǐng)域を指定します。
背景畫像は、コンテンツ ボックス、パディング ボックス、およびボーダー ボックスの領(lǐng)域に配置できます。
えープログラムを?qū)g行して試してください
CSS3のbackground-clipプロパティ
CSS3のbackground-clip背景クリッピングプロパティは、指定された位置から描畫を開始します
<!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>プログラムを?qū)g行して試してください
新しい背景プロパティ
| Order | Description | CSS |
|---|---|---|
| background-clip | は背景の描畫領(lǐng)域を指定します。 | 3 |
| background-origin | 背景畫像の配置領(lǐng)域を指定します。 | 3 |
| background-size | 背景畫像のサイズを指定します。 | 3 |
