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

CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)

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

在css中，共有如下幾個(gè)background屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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


3. 設(shè)置背景圖片的大小 background-size

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

相關(guān)文章

最新評(píng)論