圖解CSS3 讀書筆記——背景

felix0913 發(fā)布于2019-08-28 18:23 / 1857人閱讀

摘要：將保持背景的原始高度和寬度。對(duì)于平鋪的重復(fù)性背景圖像，確保背景圖像不會(huì)有截?cái)嘈Ч?。解決屏幕雙倍像素下背景圖像模糊問(wèn)題。將大圖縮小一倍使用鏈接或者列表元素的背景圖像能和文本一起進(jìn)行縮放。內(nèi)聯(lián)元素背景圖像平鋪循環(huán)方式暫無(wú)文章多背景

CSS背景屬性 基本屬性

background-color: 默認(rèn)值為transparent，可以以"顏色名"、"rgb(css3新增rgba)"、"hls(css3中新增hlsa)"、"十六進(jìn)制"的方式設(shè)置顏色值
background-image: none(默認(rèn)) || url()
background-repeat: repeat(默認(rèn)) || repeat-x || repeat-y || no-repeat
background-attachment: scroll(默認(rèn)) || fixed

注意：background-attachment取值為fixed時(shí)，需要運(yùn)用在html或body標(biāo)簽上。使用在其他標(biāo)簽上沒(méi)有固定效果。

background-position：水平位置垂直位置

說(shuō)明：一般來(lái)說(shuō)，背景圖片的左上角是和元素的左上角對(duì)齊的，background-position這一屬性可以改變背景圖片與元素的對(duì)齊點(diǎn)。

先來(lái)看看水平位移和垂直位移單位都是px的時(shí)候：

background-position: 30px 50px

以元素左上角為坐標(biāo)原點(diǎn)，水平向右延展方向?yàn)閤軸正軸，垂直向下延展方向?yàn)閥軸正軸。那么此時(shí)圖片的左上角與元素的(30,50)坐標(biāo)點(diǎn)對(duì)齊。

現(xiàn)在來(lái)看百分比的情況：
計(jì)算方式為：
水平偏移x：（元素寬度-圖片寬度）*百分比
垂直偏移y：（元素高度-圖片高度）*百分比

此時(shí)同樣的，圖片左上角跟計(jì)算出的元素的(x,y)坐標(biāo)點(diǎn)對(duì)齊。

當(dāng)然啦。實(shí)際做項(xiàng)目的時(shí)候我們不會(huì)這么麻煩的去計(jì)算，這里只是總結(jié)一下它的計(jì)算方式。
實(shí)際項(xiàng)目中只需要記?。?/p>

1、背景圖片水平垂直居中:

background-position: center

2、雪碧圖情況：
原理跟使用px的情況相似，這里不贅述了。可以去看看這篇文章：Click here

css3新增屬性

background-origin: 指定繪制背景圖片的起點(diǎn)
background-clip: 指定背景圖片的顯示范圍
background-size: 指定背景圖片的尺寸大?。ê艹Ｓ茫?background-break: 指定內(nèi)聯(lián)元素的背景圖片進(jìn)行平鋪時(shí)的循環(huán)方式

CSS3 background-origin

該屬性主要用來(lái)決定背景圖片與元素對(duì)其原點(diǎn)的參考點(diǎn)。默認(rèn)是以元素左上角為坐標(biāo)原點(diǎn)進(jìn)行對(duì)其，這一屬性可以打破這一格局。

background-origin有三個(gè)屬性：
padding-box：默認(rèn)值。表明圖片的原點(diǎn)和元素padding外邊緣（border的內(nèi)邊緣）進(jìn)行對(duì)齊。
border-box：表明圖片的原點(diǎn)和元素border的外邊緣進(jìn)行對(duì)齊。
content-box：表明圖片的原點(diǎn)和元素content外邊緣（padding的內(nèi)邊緣）進(jìn)行對(duì)齊。

瀏覽器兼容性：
現(xiàn)代瀏覽器都支持和ie9+。但是使用時(shí)還需要加上瀏覽器前綴。
如下：

/*old Webkit and Gecko*/
-moz-background-origin: padding || border|| content;
-webkit-background-origin: padding || border|| content;
/*new Webkit and Gecko*/
-moz-background-origin: padding-box || border-box || content-box;
-webkit-background-origin: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box; /*w3c標(biāo)準(zhǔn)*/

例子：
1、padding-box

2、border-box

3、content-box

CSS3 background-clip

該屬性用來(lái)定義背景圖片的裁剪區(qū)域。這樣說(shuō)得會(huì)比較抽象，稍后會(huì)通過(guò)實(shí)例為大家說(shuō)明。

屬性：

border-box: 背景圖片在邊框下(邊框外邊緣，不會(huì)超出邊框),默認(rèn)值
padding-box: 背景延伸到padding的外邊緣，但不會(huì)超出邊框范圍(默認(rèn))
content-box: 背景僅在內(nèi)容區(qū)描繪，不會(huì)超過(guò)padding和邊框范圍

是不是覺(jué)得似曾相識(shí)呢？沒(méi)錯(cuò)，就是background-origin剛剛提到的三個(gè)屬性。

瀏覽器兼容性：

在Gecko內(nèi)核瀏覽器（FF3.6-）不支持content-box，并且使用border和padding來(lái)代替標(biāo)準(zhǔn)語(yǔ)法中的border-box和padding-box

safari5能夠在標(biāo)準(zhǔn)屬性中支持border-box和padding-box，但content-box屬性值也需要加上-webkit-前綴

我們先來(lái)看看默認(rèn)情況下如果背景圖片超出了元素的范圍，元素會(huì)對(duì)背景圖片進(jìn)行怎樣的裁剪。
測(cè)試圖片200寬200高。

repeat：
/代碼：/
.box {

   width: 260px;height: 150px;
   border: 10px dashed lightgreen;
   background-color:slateblue;
   background-image: url(img/test.jpg);
   background-repeat: repeat;

}
效果：

no-repeat：
/代碼：/
.box {

  background-repeat: repeat;

}

效果：

默認(rèn)情況下：

背景平鋪時(shí)會(huì)填滿整個(gè)元素，包括border的范圍。此時(shí)border-color完全在background-image下，而且background-image從元素邊框左上角起到元素邊框右下角止。但background-position的起始點(diǎn)卻是從元素的內(nèi)部補(bǔ)白（padding）外邊緣開始。

背景不平鋪時(shí)border-color從元素邊框左上角起到元素邊框的右下角邊緣止，background-image從內(nèi)容補(bǔ)白（padding）外邊緣的左上角起到元素邊框的右下角止。

現(xiàn)在使用background-clip屬性可以改變背景圖片的填充范圍。

默認(rèn)情況下，background-clip為border-box。

background-clip為padding-box時(shí)：背景圖片的填充范圍為，元素padding外邊緣左上角到元素padding外邊緣右下角。注意此時(shí)背景顏色的填充范圍也會(huì)改變。

平鋪時(shí)：

不平鋪：

background-clip為content-box時(shí)：背景圖片的填充范圍為，元素padding內(nèi)邊緣左上角到元素padding內(nèi)邊緣右下角。注意此時(shí)背景顏色的填充范圍也會(huì)改變。

平鋪時(shí)：

不平鋪：

CSS3 background-size

現(xiàn)在來(lái)看一個(gè)用得相對(duì)比較多的屬性。background-size屬性可以用來(lái)指定背景圖片的尺寸，可以控制背景圖片在水平和垂直兩個(gè)方向上的縮放，也可以控制圖片拉伸覆蓋背景區(qū)域的方式。背景圖片能夠自適應(yīng)元素盒子的大小。

屬性：

background-size: auto ||  ||  || cover || contain

auto: 默認(rèn)值。將保持背景的原始高度和寬度。

: 取具體的整體值（如px），將以設(shè)定的寬高值對(duì)背景圖片進(jìn)行縮放。

: 取值為百分值，可以是0% ~
100%。注意這個(gè)值是對(duì)于元素的寬度進(jìn)行計(jì)算的，計(jì)算出來(lái)的寬高值再作為背景圖片的寬高值對(duì)背景圖片進(jìn)行縮放。

cover: 將背景圖片寬度或者高度放大，以使圖片寬高能適應(yīng)鋪滿容器寬高較大的一方，但不同于background-cover:100% 100%的方式。

1、寬度為100，高度為250
2、寬度為250，高度為100

3、寬度為80，高度為100

contain:保持背景圖像本身的寬高比例，將背景圖像縮放到寬度或高度正好適應(yīng)所定義背景容器的區(qū)域。

當(dāng)background-size只取一個(gè)值時(shí)，另一個(gè)值自動(dòng)設(shè)為auto。

瀏覽器兼容性：
ie9+以及其他主流。老版本瀏覽器需要加上前綴。

background-size的其他適用場(chǎng)合：

在流體布局或者響應(yīng)式布局中，確保背景圖像能始終適配容器大小。

對(duì)于平鋪的重復(fù)性背景圖像，確保背景圖像不會(huì)有截?cái)嘈Ч?/p>

解決Retina屏幕雙倍像素下背景圖像模糊問(wèn)題。（將大圖縮小一倍）

使用鏈接或者列表元素的背景圖像能和文本一起進(jìn)行縮放。

其他新增CSS3背景屬性

因?yàn)檫@兩個(gè)屬性瀏覽器兼容性比較差，項(xiàng)目中使用較少，所以這里不進(jìn)行具體總結(jié)了。收集了一些相關(guān)的文章供有興趣的小伙伴進(jìn)行閱讀。

1、內(nèi)聯(lián)元素背景圖像平鋪循環(huán)方式：暫無(wú)文章
2、CSS3多背景：Click here

GPU云服務(wù)器云服務(wù)器讀書筆記編程思想讀書筆記大數(shù)據(jù)時(shí)代讀書筆記讀書計(jì)劃

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111214.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

felix0913

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

朋友去大廠面試Python開發(fā)工程師，看完準(zhǔn)備過(guò)程我傻眼了

閱讀 943·2021-11-18 10:02
關(guān)于移動(dòng)端1px的解決方法

閱讀 1829·2019-08-30 15:56
前端開發(fā)知識(shí)點(diǎn)之 html &css

閱讀 2624·2019-08-30 13:47
頁(yè)面制作（切圖）第一章

閱讀 2695·2019-08-29 12:43
字體圖標(biāo)(font-icon)，你還有什么理由不使用它？

閱讀 922·2019-08-29 11:19
圖解CSS3 讀書筆記——背景

閱讀 1858·2019-08-28 18:23
puppeteer爬蟲

閱讀 2726·2019-08-26 12:23
再次簡(jiǎn)單明了總結(jié)flex布局，一看就懂...

閱讀 3079·2019-08-23 15:29

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

圖解CSS3 讀書筆記——背景

相關(guān)文章

**圖解CSS3讀書筆記文本與顏色**

**圖解CSS3 讀書筆記——選擇器**

《css揭秘》讀書筆記

雙十二大前端工程師讀書清單

雙十二大前端工程師讀書清單

發(fā)表評(píng)論

0條評(píng)論

felix0913

男|高級(jí)講師

TA的文章

朋友去大廠面試Python開發(fā)工程師，看完準(zhǔn)備過(guò)程我傻眼了

關(guān)于移動(dòng)端1px的解決方法

前端開發(fā)知識(shí)點(diǎn)之 html &css

頁(yè)面制作（切圖）第一章

字體圖標(biāo)(font-icon)，你還有什么理由不使用它？