CSS3 背景

CSS3包含幾個新的背景屬性，提供更大背景元素控制。

在本章您將了解以下背景屬性：

background-imagebackground-sizebackground-originbackground-clip

您也將學習如何使用多重背景圖片。

CSS3 background-image屬性

CSS3中可以透過background-image屬性加入背景圖片。

不同的背景圖像和圖像以逗號隔開，所有的圖片中顯示在最頂端的為第一張。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

可以為不同的圖片設定多個不同的屬性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。您可以指定像素或百分比大小。

你指定的大小是相對於父元素的寬度和高度的百分比的大小。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</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屬性指定了背景影像的位置區域。

content-box, padding-box,和 border-box區域內可以放置背景圖片。

CSS3 多個背景圖片

#CSS3 允許你在元素

那個新增多個背景影像。

CSS3 background-clip屬性

CSS3中background-clip背景剪裁屬性是從指定位置開始繪製。

新的背景屬性

# CSS

######################################################################################### #####background-clip 規定背景的繪圖區。 3 ######background-origin 中時定位時為區域上規定的背景圖片。 3 ######background-size 中中規定背景圖片的尺寸。 3 #############

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </p> <p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg" alt="Flowers" width="224" height="162"></p> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear