CSS3 包含多個新的背景屬性,它們提供了對背景更強大的控制。
在本章,您將學到以下背景屬性:
- background-size
- background-origin
您也將學到如何使用多重背景圖片。
新的背景屬性:
屬性 | 描述 | CSS |
---|---|---|
background-clip | 規定背景的繪製區域。 | 3 |
background-origin | 規定背景圖片的定位區域。 | 3 |
background-size | 規定背景圖片的尺寸。 | 3 |
- CSS3 background-size 屬性
- CSS3 background-origin 屬性
- CSS3 多重背景圖片
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
background-size
background-size 屬性規定背景圖像的尺寸。
默認值: | auto |
---|---|
繼承性: | no |
版本: | CSS3 |
JavaScript 語法: | object.style.backgroundSize=」60px 80px」 |
語法
background-size: length|percentage|cover|contain;
值 | 描述 | 測試 |
---|---|---|
length | 設置背景圖像的高度和寬度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 「auto」。 | 測試 |
percentage | 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 「auto」。 | 測試 |
cover | 把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。 | 測試 |
contain | 把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。 | 測試 |
.wp-bp-full-page-header { background-color: #343a40; color: #fff; background-size: cover; background-position: center; }
background-position
background-position:
CSS 顏色
CSS 顏色值
顏色是由紅(RED),綠(GREEN),藍(BLUE )光線的顯示結合。
在CSS中定義顏色的方法有:十六進位色、RGB顏色、RGBA顏色、HSL顏色、HSLA顏色、預定義/跨瀏覽器顏色名。
https://www.html.cn/book/css/values/color/index.htm
RGBA
說明:
RGBA(R,G,B,A)
取值:
R:紅色值。正整數 | 百分數
G:綠色值。正整數 | 百分數
B:藍色值。正整數 | 百分數
A:Alpha透明度,取值0~1之間。
說明:
RGBA記法
此色彩模式與RGB相同,只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式實現透明度,可使用 IE 濾鏡處理
示例代碼:
<section class="wp-bp-full-page-header" >
<div class="page-header-overlay" >
<section class="wp-bp-full-page-header" style="background-image: url( http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_mountains_大-1.jpg )" >
<div class="page-header-overlay" style="background-color: rgba(0, 0, 0, 0.5);" >
rgba色彩模式與RGB相同,只是在RGB模式上新增了Alpha透明度