1.css3簡介 CSS3是CSS(層疊樣式表)技術的升級版本,於1999年開始制訂,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。 2.css3背景 <css3>概覽有幾個很棒的背景屬性,它們提供了對背景 ...
1.css3簡介
CSS3是CSS(層疊樣式表)技術的升級版本,於1999年開始制訂,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。
2.css3背景
<css3>概覽
有幾個很棒的背景屬性,它們提供了對背景更強大的控制。
-
backgroud-size
: 規定背景圖片的尺寸。 -
background-orgin
:規定背景圖片的定位區域。 -
backgroud-clip
:規定背景的繪製區域。
<瀏覽器的支持>
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera (這些瀏覽器支持css3背景屬性)
(1)baground-size
(規定背景圖片的尺寸)
body{
background: url(給你的背景插入一張圖片)
background-size(規定你背景圖的大小)
background-repeat(使你的背景圖向下延伸)
padding-top(你的背景距離頂部的距離)
}
設置背景尺寸的方式有如上四種方法。
<*數值定義>
設置背景圖像的高度和寬度。
第一個值設置寬度,第二個值設置高度。
如果只設置一個值,則第二個值會被設置為 auto。
<*百分比>(略)
(2)background-orgin
(規定背景圖片的定位區域)
body{
background-origin:content-box;(背景圖像填充框的相對位置)
background-origin:border-box;(背景圖像邊界框的相對位置)
background-origin:padding-box;(背景圖像的相對位置的內容框)
}
背景圖的位置
(3)backgroud-clip
(規定背景的繪製區域)
body{
background-clip:content-box;背景繪製在內容方框內(剪切成內容方框)
background-clip:padding-box; 背景繪製在襯距方框內(剪切成襯距方框)
background-clip:border-box;預設值。背景繪製在邊框方框內(剪切成邊框方框)
}
附:###背景- 簡寫屬性###
在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。
為了簡化這些屬性的代碼,我們可以將這些屬性合併在同一個屬性中.
背景顏色的簡寫屬性為 "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}