圖解CSS3 讀書筆記——背景

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

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

CSS背景屬性 基本屬性

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

注意：background-attachment取值為fixed時，需要運用在html或body標簽上。使用在其他標簽上沒有固定效果。

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

說明：一般來說，背景圖片的左上角是和元素的左上角對齊的，background-position這一屬性可以改變背景圖片與元素的對齊點。

先來看看水平位移和垂直位移單位都是px的時候：

background-position: 30px 50px

以元素左上角為坐標原點，水平向右延展方向為x軸正軸，垂直向下延展方向為y軸正軸。那么此時圖片的左上角與元素的(30,50)坐標點對齊。

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

此時同樣的，圖片左上角跟計算出的元素的(x,y)坐標點對齊。

當然啦。實際做項目的時候我們不會這么麻煩的去計算，這里只是總結(jié)一下它的計算方式。
實際項目中只需要記住：

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

background-position: center

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

css3新增屬性

background-origin: 指定繪制背景圖片的起點
background-clip: 指定背景圖片的顯示范圍
background-size: 指定背景圖片的尺寸大小（很常用）
background-break: 指定內(nèi)聯(lián)元素的背景圖片進行平鋪時的循環(huán)方式

CSS3 background-origin

該屬性主要用來決定背景圖片與元素對其原點的參考點。默認是以元素左上角為坐標原點進行對其，這一屬性可以打破這一格局。

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

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

/*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標準*/

例子：
1、padding-box

2、border-box

3、content-box

CSS3 background-clip

該屬性用來定義背景圖片的裁剪區(qū)域。這樣說得會比較抽象，稍后會通過實例為大家說明。

屬性：

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

是不是覺得似曾相識呢？沒錯，就是background-origin剛剛提到的三個屬性。

瀏覽器兼容性：

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

safari5能夠在標準屬性中支持border-box和padding-box，但content-box屬性值也需要加上-webkit-前綴

我們先來看看默認情況下如果背景圖片超出了元素的范圍，元素會對背景圖片進行怎樣的裁剪。
測試圖片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;

}

效果：

默認情況下：

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

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

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

默認情況下，background-clip為border-box。

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

平鋪時：

不平鋪：

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

平鋪時：

不平鋪：

CSS3 background-size

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

屬性：

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

auto: 默認值。將保持背景的原始高度和寬度。

: 取具體的整體值（如px），將以設定的寬高值對背景圖片進行縮放。

: 取值為百分值，可以是0% ~
100%。注意這個值是對于元素的寬度進行計算的，計算出來的寬高值再作為背景圖片的寬高值對背景圖片進行縮放。

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

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

3、寬度為80，高度為100

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

當background-size只取一個值時，另一個值自動設為auto。

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

background-size的其他適用場合：

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

對于平鋪的重復性背景圖像，確保背景圖像不會有截斷效果。

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

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

其他新增CSS3背景屬性

因為這兩個屬性瀏覽器兼容性比較差，項目中使用較少，所以這里不進行具體總結(jié)了。收集了一些相關的文章供有興趣的小伙伴進行閱讀。

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111214.html

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

摘要：將內(nèi)容在邊界內(nèi)換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...

lvzishen 2019-08-28 18:26 評論0 收藏0
圖解CSS3 讀書筆記——選擇器

摘要：選擇器統(tǒng)覽的選擇器及其對應的瀏覽器兼容性前端觀察這篇文章已經(jīng)詳細總結(jié)了通過測試有如下更正或說明注下述瀏覽器兼容性以表示，表明以及以上版本。 CSS1、2、3選擇器統(tǒng)覽 css1、2、3的選擇器及其對應的瀏覽器兼容性前端觀察這篇文章已經(jīng)詳細總結(jié)了：Click 通過測試：有如下更正或說明：注：下述瀏覽器兼容性以x+表示，表明x以及x以上版本。動態(tài)偽類選擇器E:active：若E為錨...

fobnn 2019-08-28 18:22 評論0 收藏0
《css揭秘》讀書筆記

摘要：但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用這個單位。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。第一章引言 css編碼技巧在引言中，作者提到使用em與inherit來實現(xiàn)css代碼的簡潔與可維護性。但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用em這個單位。如何用以及何時去使用，還是要根據(jù)實際開發(fā)需求來定吧，畢竟這兩個屬性...

xiguadada 2019-08-29 16:28 評論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網(wǎng)絡應用，而非簡單的頁面。本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...

happen 2019-08-02 16:00 評論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發(fā)布在上。發(fā)布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網(wǎng)絡應用，而非簡單的頁面。本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進行了深入的交流，現(xiàn)免費分享到這里，不足之處歡迎指教...

余學文 2019-08-22 11:14 評論0 收藏0