資訊專欄INFORMATION COLUMN
摘要：之前筆試題有一道選擇題是關(guān)于屬性的，后來查閱資料才發(fā)現(xiàn)有各種子屬性，特寫此文章整理一下。新增指定背景的顯示區(qū)域。默認(rèn)情況下，總是以元素左上角為坐標(biāo)原點(diǎn)進(jìn)行背景圖像定位。此關(guān)鍵字表示背景相對(duì)于元素的內(nèi)容固定。
之前筆試題有一道選擇題是關(guān)于background屬性的，后來查閱資料才發(fā)現(xiàn)background有各種子屬性，特寫此文章整理一下。
瀏覽器兼容性支持PC端：
移動(dòng)端：
background-image
定義背景圖像。
background-color
定義背景顏色。
background-origin【css3新增】
指定背景的顯示區(qū)域。默認(rèn)情況下，總是以元素左上角為坐標(biāo)原點(diǎn)進(jìn)行背景圖像定位。
值：border-box | padding-box | content-box
border-box 從邊框區(qū)域開始顯示背景,背景會(huì)延伸到外邊界的邊框，但邊框在上，背景在下。
padding-box 從補(bǔ)白區(qū)域開始顯示背景，背景延伸到最外邊界的padding，邊框不會(huì)有背景出現(xiàn)。
content-box 僅在內(nèi)容區(qū)顯示背景
background-clip【css3新增】
指定背景的裁剪區(qū)域。
值：border-box | padding-box | content-box
【看栗子】
#mydiv{ padding: 25px; border: 10px dotted #000; background-color:yellow; }
border-box 背景會(huì)延伸到外邊界的邊框，但邊框在上，背景在下。
padding-box 從補(bǔ)白區(qū)域開始顯示背景，背景延伸到最外邊界的padding，邊框不會(huì)有背景出現(xiàn)。
content-box 僅在內(nèi)容區(qū)顯示背景
background-repeat
設(shè)置背景圖像是否及如何重復(fù)鋪排
/ 單值語法 /
background-repeat: repeat-x;//相當(dāng)于 repeat no-repeat
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/ 雙值語法: 水平horizontal | 垂直vertical /
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
background-repeat: inherit;
repeat
圖像會(huì)按需重復(fù)來覆蓋整個(gè)背景圖片所在的區(qū)域. 如果大小不合適，最后一個(gè)圖像會(huì)被裁剪,
space 【當(dāng)前沒有廣泛支持】
圖像會(huì)盡可能得重復(fù), 但是不會(huì)裁剪. 第一個(gè)和最后一個(gè)圖像會(huì)被固定在元素(element)的相應(yīng)的邊上, 同時(shí)空白會(huì)均勻地分布在圖像之間. background-position屬性會(huì)被忽視, 除非只有一個(gè)圖像能被無裁剪地顯示. 只在一種情況下裁剪會(huì)發(fā)生, 那就是圖像太大了以至于沒有足夠的空間來完整顯示一個(gè)圖像.
round 【當(dāng)前沒有廣泛支持】
隨著允許的空間在尺寸上的增長, 被重復(fù)的圖像將會(huì)伸展(沒有空隙), 直到有足夠的空間來添加一個(gè)圖像. 當(dāng)下一個(gè)圖像被添加后, 所有的當(dāng)前的圖像會(huì)被壓縮來騰出空間. 例如, 一個(gè)圖像原始大小是260px, 重復(fù)三次之后, 可能會(huì)被伸展到300px, 直到另一個(gè)圖像被加進(jìn)來. 這樣他們就可能被壓縮到225px.關(guān)鍵是瀏覽器怎么計(jì)算什么時(shí)候應(yīng)該添加一個(gè)圖像進(jìn)來, 而不是繼續(xù)伸展.
no-repeat
圖像不會(huì)被重復(fù)(因?yàn)楸尘皥D像所在的區(qū)域?qū)⒖赡軟]有完全被覆蓋). 那個(gè)沒有被重復(fù)的背景圖像的位置是由background-position屬性來決定.
background-size【css3新增】
定義背景圖片大小
/ 關(guān)鍵字 /
background-size: cover //縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見
background-size: contain //縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白
/ 一個(gè)值: 這個(gè)值指定圖片的寬度，圖片的高度隱式的為auto /
background-size: 50% //相對(duì)背景區(qū)【由background-origin設(shè)置】的百分比
background-size: 3em
background-size: 12px
background-size: auto //以背景圖片的比例縮放背景圖片
/ 兩個(gè)值: 第一個(gè)值指定圖片的寬度，第二個(gè)值指定圖片的高度 /
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/ 逗號(hào)分隔的多個(gè)值：設(shè)置多重背景 /
background-size: auto, auto / 不同于background-size: auto auto /
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
可以看MDN提供的例子
background-position
設(shè)置背景圖像的位置
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;
background-attachment
定義背景圖像的顯示方式。
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
fixed
此關(guān)鍵字表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。
local
此關(guān)鍵字表示背景相對(duì)于元素的內(nèi)容固定。如果一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景將會(huì)隨著元素的內(nèi)容滾動(dòng)， 并且背景的繪制區(qū)域和定位區(qū)域是相對(duì)于可滾動(dòng)的區(qū)域而不是包含他們的邊框。
scroll
此關(guān)鍵字表示背景相對(duì)于元素本身固定， 而不是隨著它的內(nèi)容滾動(dòng)（對(duì)元素邊框是有效的）。
background-clip用來判斷背景是否包含邊框區(qū)域. background-origin是用來決定background-position定位的參考位置。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115244.html
摘要：實(shí)例改文本插入在元素中該段落有自己的背景顏色背景圖片不重復(fù)，設(shè)置實(shí)例背景圖片只顯示一次，并與文本分開實(shí)例中還添加了屬性用于讓圖片與文本間隔開參考資料菜鳥教程一，效果圖。 二，代碼。 DOCTYPE html> CSS backgrounds h1 { background-color: #6495ed; } ...
摘要：的盒子及相關(guān)盒子基礎(chǔ)，，版式邊框。可以設(shè)置盒子內(nèi)容區(qū)與邊框的間距。將其設(shè)為則其空間可以被復(fù)用。把圖片調(diào)整到像素寬，像素高。拉大圖片，使其完全填滿背景區(qū)保持寬高比。簡寫簡寫后可以添加多張背景圖片，用，隔開，最先添加的在上層 CSS的盒子及相關(guān) 盒子基礎(chǔ) postion，float，display——版式 ? 邊框（border）?？梢栽O(shè)置邊框的寬窄、樣式和顏色。 ? 內(nèi)邊距（pa...
摘要：任何方向上都不重復(fù)只讓背景圖片顯示一次。，背景圖片就會(huì)以段落的中心點(diǎn)為起點(diǎn)。第一個(gè)值表示水平位置，第二個(gè)值表示垂直位置。拉大圖片，使其完全填滿背景區(qū)保持寬高比。提示漸變是幫我們生成的背景圖片。 在CSS里面，每個(gè)元素盒子都可以想象成由兩個(gè)圖層組成。 前景層：內(nèi)容（如文本或圖片）和邊框。 背景層：用實(shí)色填充（使用 background-color 屬性），也可以包含任意多個(gè)背景圖片（...
摘要：盒模型，盒模型看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。盒子實(shí)際占用的大小是左左右右，屬性細(xì)節(jié)一個(gè)塊元素的默認(rèn)寬度是，表示它會(huì)自動(dòng)延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對(duì)和指定顏色，添加任何裝飾。 盒模型 1，盒模型： CSS看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。 2，五個(gè)屬性： 從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...
摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號(hào)，那么同時(shí)需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關(guān)于使用還是還是百分比，需要根據(jù)具體情況來決定。 最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧 盡量減少代碼重復(fù) 在實(shí)踐中，代碼可維護(hù)性的最大要...
閱讀 2572·2021-09-09 09:33
閱讀 2939·2019-08-30 15:56
閱讀 3207·2019-08-30 14:21
閱讀 961·2019-08-30 13:01
閱讀 956·2019-08-26 18:27
閱讀 3659·2019-08-26 13:47
閱讀 3532·2019-08-26 10:26
閱讀 1657·2019-08-23 18:38
