【css】background筆記

Youngs 發布于2019-08-30 13:01 / 890人閱讀

摘要：之前筆試題有一道選擇題是關于屬性的，后來查閱資料才發現有各種子屬性，特寫此文章整理一下。新增指定背景的顯示區域。默認情況下，總是以元素左上角為坐標原點進行背景圖像定位。此關鍵字表示背景相對于元素的內容固定。

之前筆試題有一道選擇題是關于background屬性的，后來查閱資料才發現background有各種子屬性，特寫此文章整理一下。

瀏覽器兼容性支持

PC端：

移動端：

background屬性 【盒模型】

background-image

定義背景圖像。

background-color

定義背景顏色。

background-origin【css3新增】

指定背景的顯示區域。默認情況下，總是以元素左上角為坐標原點進行背景圖像定位。
值：border-box | padding-box | content-box

border-box 從邊框區域開始顯示背景,背景會延伸到外邊界的邊框，但邊框在上，背景在下。

padding-box 從補白區域開始顯示背景，背景延伸到最外邊界的padding，邊框不會有背景出現。

content-box 僅在內容區顯示背景

background-clip【css3新增】

指定背景的裁剪區域。
值：border-box | padding-box | content-box
【看栗子】
#mydiv{ padding: 25px; border: 10px dotted #000; background-color:yellow; }

border-box 背景會延伸到外邊界的邊框，但邊框在上，背景在下。

padding-box 從補白區域開始顯示背景，背景延伸到最外邊界的padding，邊框不會有背景出現。

content-box 僅在內容區顯示背景

background-repeat

設置背景圖像是否及如何重復鋪排
/ 單值語法 /
background-repeat: repeat-x;//相當于 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
圖像會按需重復來覆蓋整個背景圖片所在的區域. 如果大小不合適，最后一個圖像會被裁剪,

space 【當前沒有廣泛支持】
圖像會盡可能得重復, 但是不會裁剪. 第一個和最后一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分布在圖像之間. background-position屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是圖像太大了以至于沒有足夠的空間來完整顯示一個圖像.

round 【當前沒有廣泛支持】
隨著允許的空間在尺寸上的增長, 被重復的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加后, 所有的當前的圖像會被壓縮來騰出空間. 例如, 一個圖像原始大小是260px, 重復三次之后, 可能會被伸展到300px, 直到另一個圖像被加進來. 這樣他們就可能被壓縮到225px.關鍵是瀏覽器怎么計算什么時候應該添加一個圖像進來, 而不是繼續伸展.

no-repeat
圖像不會被重復(因為背景圖像所在的區域將可能沒有完全被覆蓋). 那個沒有被重復的背景圖像的位置是由background-position屬性來決定.

background-size【css3新增】

定義背景圖片大小
/ 關鍵字 /
background-size: cover //縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見
background-size: contain //縮放背景圖片以完全裝入背景區，可能背景區部分空白

/ 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto /
background-size: 50% //相對背景區【由background-origin設置】的百分比
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

/ 逗號分隔的多個值：設置多重背景 /
background-size: auto, auto / 不同于background-size: auto auto /
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit
可以看MDN提供的例子

background-position

設置背景圖像的位置
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
此關鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。

local
此關鍵字表示背景相對于元素的內容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內容滾動，并且背景的繪制區域和定位區域是相對于可滾動的區域而不是包含他們的邊框。

scroll
此關鍵字表示背景相對于元素本身固定，而不是隨著它的內容滾動（對元素邊框是有效的）。

【background-origin vs background-clip】

background-clip用來判斷背景是否包含邊框區域.
background-origin是用來決定background-position定位的參考位置。

GPU云服務器云服務器 Background _background background:url 和Background

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115244.html

【代碼筆記】Web-CSS-CSS background背景

摘要：實例改文本插入在元素中該段落有自己的背景顏色背景圖片不重復，設置實例背景圖片只顯示一次，并與文本分開實例中還添加了屬性用于讓圖片與文本間隔開參考資料菜鳥教程一，效果圖。二，代碼。 DOCTYPE html> CSS backgrounds h1 { background-color: #6495ed; } ...

番茄西紅柿 2019-04-23 11:54 評論0 收藏0
CSS學習筆記之定位

摘要：的盒子及相關盒子基礎，，版式邊框?？梢栽O置盒子內容區與邊框的間距。將其設為則其空間可以被復用。把圖片調整到像素寬，像素高。拉大圖片，使其完全填滿背景區保持寬高比。簡寫簡寫后可以添加多張背景圖片，用，隔開，最先添加的在上層 CSS的盒子及相關盒子基礎 postion，float，display——版式 ? 邊框（border）?？梢栽O置邊框的寬窄、樣式和顏色。 ? 內邊距（pa...

Lavender 2019-08-28 18:02 評論0 收藏0
CSS學習筆記(七) 背景

摘要：任何方向上都不重復只讓背景圖片顯示一次。，背景圖片就會以段落的中心點為起點。第一個值表示水平位置，第二個值表示垂直位置。拉大圖片，使其完全填滿背景區保持寬高比。提示漸變是幫我們生成的背景圖片。在CSS里面，每個元素盒子都可以想象成由兩個圖層組成。前景層：內容（如文本或圖片）和邊框。背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景圖片（...

Pikachu 2019-08-28 18:03 評論0 收藏0
【零基礎入門】 css學習筆記（2）盒模型

摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性：從內往外： width:內容的寬度，而不是盒子的寬度； hei...

mrcode 2019-08-30 15:53 評論0 收藏0
css編碼技巧【css揭秘讀書筆記】

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號，那么同時需要調整行高。那么經過修改后的代碼如下關于使用還是還是百分比，需要根據具體情況來決定。最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧盡量減少代碼重復在實踐中，代碼可維護性的最大要...

Miyang 2019-08-30 12:59 評論0 收藏0