欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS的background屬性及CSS3的背景圖片設置總結

segmentfault   發(fā)布時間：2016-06-13 11:53:38   作者：trigkit4   我要評論
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設置總結,背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下

在css中，共有如下幾個background屬性

屬性 描述 CSS
background 在一個聲明中設置所有的背景屬性。 1
background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 1
background-color 設置元素的背景顏色。 1
background-image 設置元素的背景圖像。 1
background-position 設置背景圖像的開始位置。 1
background-repeat 設置是否及如何重復背景圖像。 1
background-clip 規(guī)定背景的繪制區(qū)域。 3
background-origin 規(guī)定背景圖片的定位區(qū)域。 3
background-size 規(guī)定背景圖片的尺寸。 3

從表格中，我們可以看出 background-clip ，background-origin和 background-size是css3中新增的屬性。

CSS Code復制內(nèi)容到剪貼板
  1. `background`-`clip`：border-box | padding-box | content-box | no-clip  

用來確定背景的裁剪區(qū)域。
引擎類型 Gecko Webkit Presto：

CSS Code復制內(nèi)容到剪貼板
  1. background-clip -moz-background-clip -webkit-background-clip -o-background-clip  

注：本屬性不支持IE6,7,8
一張圖看懂三個屬性值的區(qū)別：
2016613115339025.jpg (366×166)

CSS Code復制內(nèi)容到剪貼板
  1. background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain   

cover： 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain ：把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域。

CSS Code復制內(nèi)容到剪貼板
  1. background-origin ： border | padding | content   

取值：
border： 從border區(qū)域開始顯示背景。
padding： 從padding區(qū)域開始顯示背景。
content： 從content區(qū)域開始顯示背景。
2016613115843474.jpg (366×166)

CSS3的背景圖片設置
1. 背景圖片起始位置 background-origin

background-origin 值
border-box 邊框
padding-box 內(nèi)邊距（默認值）
content-box 內(nèi)容區(qū)域

background-origin ： border-box | padding-box | content-box;
注意: 背景必須設為no-repeat
2. 背景圖片裁剪 background-clip

background-clip 值
border-box 邊框（默認值）
padding-box 內(nèi)邊距
content-box 內(nèi)容區(qū)域
no-clip 不裁剪,與border-box效果相同


3. 設置背景圖片的大小 background-size

background-size 值
auto 默認值，不改變背景圖片的原始高度和寬度
長度值 成對出現(xiàn)如200px 50px, 只設置一個值, 等比例縮放
百分比 0％~100％之間的任何值, 只設置一個值, 等比例縮放
cover 覆蓋, 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain 容納, 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內(nèi)。

相關文章

最新評論