background 背景屬性
我們知道元素有前景色color,與之對應的還有背景色,通過background我們可以為元素添加實色(background-color)和任意多個背景圖檔(background-image)。
css 背景常見屬性
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
一、background-color
background-color 屬性設定元素的背景顔色。它會會填充元素的内容、内邊距和邊框區域,擴充到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。如果不想它包含邊框可以用它的另一個屬性clip來處理。
看效果圖,我們知道預設背景顔色會填充邊框的。
它的取值有:
1、關鍵字:red,blue等
2、十六進制值:#ff0000
3、transparent值
4、inherit:從父元素那繼承的值
5、rgb、rgba(如rgba(255,255,0,.8))、hsl、hsla(如hsla(360, 50%, 50%, .5))
等
二、background-position
background-position屬性顧名思義是用來控制背景的位置,它同時設定了元素和圖檔的原點,而原點決定了元素和圖檔中某一點的水準和垂直坐标。預設情況原點位于左上角。也就是說元素的左上角和圖檔的左上角是對齊的。
它的取值:
一、它的五個關鍵字:top、left、right、bottom、center。二二取值都可以成為它們的屬性值。
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
上面的關鍵字如果隻設定一個,那另外一個也會取相同的值。關鍵字的順序不重要,left bottom和bottom left意思一樣。
二、百分比值:
第一個值是水準位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。隻設定一個值,則隻用來設定水準位置,而垂直位置會預設設為center。
三、像素或其他css機關
第一個值是水準位置,第二個值是垂直位置。左上角是 0 0。機關是像素 (0px 0px) 或任何其他的 CSS 機關。如果您僅規定了一個值,另一個值将是50%。您可以混合使用 % 和 position 值。
此外還可以運用正負值,将圖檔左上角定位到元素外部,或将圖檔右下角推到元素外部。
background-position: top right;background-repeat:no-repeat;
效果圖:
三、background-repeat
background-repeat 屬性設定如何重複背景圖像。預設背景圖像在水準和垂直方向上重複。
它的取值有:
repeat:預設值
repeat-x:水準方向重複
repeat-y:水準方向重複
no-repeat:圖像隻出現一次
inherit:繼承
此外css3還新增二個值:
background-repeat:round:為圖檔不被剪切,自動調整圖檔大小來适應背景區域。
background-repeat:space:為圖檔不被剪切,自動添加圖檔間空白來适應背景區域。
下圖是值為background-repeat:space的效果圖:
下面是值為background-repeat:repeat-y的效果圖:
四、background-image
該屬性為元素設定背景圖像。格式為background-image:url(圖檔路徑)。
五、background-size
css3新增的背景尺寸,顧名思義就是來調整圖檔的尺寸。
它的取值:
百分比:%
像素值:第一個值設定寬度,第二個值設定高度。
cover:拉大圖檔,完全填滿背景區;保持寬高比。
contain:縮放圖檔,使其恰好适合背景區;保持寬高比。
上面最後二個屬性值會将很小的圖檔拉得很大,so會導緻圖檔失真。
六、background-attachment
該屬性規定元素内背景圖檔是否随元素滾動而移動。預設值是scroll。
它的值:
scroll
fixed:背景圖像不會随元素移動。通常應用給body元素中心位置添加水印等,讓水印不随頁面滾動而移動。
inherit
七、background-clip
background-clip 屬性規定背景的繪制區域。
它的取值:
content-box:背景被裁剪到内容框
border-box:背景被裁剪到邊框盒
padding-box:背景被裁剪到内邊距
background-color:yellow;background-clip:content-box;padding:15px;
上面的代碼給容器增加了15px的内邊距後,背景被裁剪了内容區域裡,
效果圖如下:
八、background-origin
background-origin 屬性規定 background-position 屬性相對于什麼位置來定位。
取值:
content-box:背景圖像相對于内容框來定位
border-box:背景圖像相對于邊框來定位
padding-box:背景圖像相對于内邊距框來定位
如果背景圖像的 background-attachment 屬性為 "fixed",則該屬性沒有效果。
九、背景漸變
background:linear-gradient
background:radial-gradient
具體解釋看這一篇
十、background-break
控制分離元素的顯示效果