CSS3 背景
CSS3?背景
CSS3 背景
CSS3中包含幾個新的背景屬性，提供更大背景元素控制。
在本章您將了解以下背景屬性：
background-imagebackground-sizebackground-originbackground-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(../style/images/img_flwr.gif), url(../style/images/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>可以給不同的圖片設(shè)置多個不同的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#example1 {
background: url(../style/images/img_flwr.gif) right bottom no-repeat, url(../style/images/paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>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(../style/images/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又稱“亂數(shù)假文”， 是指一篇常用于排版設(shè)計領(lǐng)域的拉丁文文章 ，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。
</p>
<p>原始圖片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg" alt="Flowers" width="224" height="162"></p>
</body>
</html>CSS3的background-Origin屬性
background-Origin屬性指定了背景圖像的位置區(qū)域。
content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像。
CSS3 多個背景圖像
CSS3 允許你在元素
那個添加多個背景圖像。 ? ?
CSS3 background-clip屬性
CSS3中background-clip背景剪裁屬性是從指定位置開始繪制。
新的背景屬性
順序 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??描述 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CSS
background-clip ? ? ? ? ? ? 規(guī)定背景的繪制區(qū)域。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3 ? ?
background-origin ? ? ? ? 規(guī)定背景圖片的定位區(qū)域。 ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
background-size ? ? ? ? ? ?規(guī)定背景圖片的尺寸。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 ? ?
