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