css——樣式化區塊——背景
元素的背景：在元素內容、內邊距和邊界下層的區域。
1。 改變背景所佔區
在新的瀏覽器中，你可以使用 background-clip屬性改變背景所佔用的區域
background-clip： border-box 背景延伸到邊框外沿（但是在邊框之下）。
background-clip： padding-box 邊框下面沒有背景，即背景延伸到內邊距外沿。
background-clip： content-box 背景裁剪到內容區 （content-box） 外沿。
background-clip： inherit 背景被裁剪為文字的前景色（只有chrome支援）。
2。 常用背景屬性
background-color： 為背景設定一個純色。
background-image： 指定在元素的背景中出現的背景影象。這可以是靜態檔案，也可以是生成的漸變。
background-repeat： 指定背景是否應該被重複（平鋪）。
background-position：指定背景應該出現在元素背景中的位置。
background-attachment： 當內容滾動時，指定元素背景的行為，例如，它是滾動的內容，還是固定的？
background： 在一行中指定以上五個屬性的縮寫。
background-size： 允許動態調整背景影象的大小。
2。1 background-color 背景顏色
注意：大多數元素的預設背景顏色不是white （白色） 而是transparent（透明），另外，設定背景顏色作為後備也是很重要的。
語法：background-color： 顏色名|十六進位制色|RGB 顏色|RGBA 顏色|HSL 顏色HSLA 顏色|預定義/跨瀏覽器顏色名；
舉例：
顏色名
background-color
：
white
；
十六進位制顏色
background-color
：
#
0000ff
；
RGB
顏色
background-color
：
rgb
（
255
，
0
，
0
）；
RGBA
顏色
background-color
：
rgba
（
255
，
0
，
0
，
0
。
5
）；
HSL
顏色
background-color
：
hsl
（
120
，
65
%，
75
%）；
HSLA
顏色
background-color
：
hsla
（
120
，
65
%，
75
%，
0
。
3
）；
2。2 background-image 背景影象
background-image通常配合 background-repeat 使用
舉例：
background-image： url（https：//mdn。mozillademos。org/files/13026/fire-ball-icon。png）； 引入圖片
background-image： linear-gradient（to bottom， orange， yellow）； 顏色漸變
注意：由於背景影象是使用CSS設定的，並且出現在內容的背景中，它們將會在螢幕閱讀器之類的輔助技術中不可見。它們不是內容圖片，只是為了裝飾，如果你想在你的頁面上包含一個圖片，這是內容的一部分，那麼你應該用元素來做。
2。3 background-repeat 背景重複
background-repeat： no-repeat： 影象將不會重複：它只會顯示一次。
background-repeat： repeat-x： 影象將在整個背景中水平地重複。
background-repeat： repeat-y： 影象會在背景下垂直地重複。
2。4 background-position 背景位置
該屬性將使用兩個透過空格分隔的值，該空間指定了影象的水平（x）和垂直（y）座標。影象的左上角是原點（0，0）。把背景想象成一個圖形，x座標從左到右，y座標從上到下。
該屬性可以接受許多不同的值型別（x和y的位置上可以用不同值型別），最常用的是：
background-position
：
200px
25px
px
絕對值
background-position
：
20rem
2
。
5rem
rem
相對值
background-position
：
90
%
25
%
百分比
background-position
：
right
center
。
關鍵字
（
left
，
center
，
right和
top
，
center
，
bottom
）
2。5 background-attachment背景附著
background-attachment：scroll
|
fixed
|
local
；
scroll： 這將把背景修改為頁面檢視，因此它將在頁面滾動時滾動。
fixed： 不管你是滾動頁面還是背景設定的元素，它都會保持在相同的位置。
local：當滾動元素時，背景會隨之滾動。
2。6 background 背景簡寫
background 可以用來設定一個或多個屬性：background-color， background-image， background-position， background-repeat， background-size，background-attachment。
舉例：
body
{
background
：
url
（
sweettexture。jpg
）
/* image */
top
center
/
200
px
200
px
/* position / size */
no-repeat
/* repeat */
fixed
/* attachment */
padding-box
/* origin */
content-box
/* clip */
red
；
/* color */
}
2。7 多個背景
將多個背景連線到單個元素。
舉例：
簡寫形式
div
{
background
：
url
（
image。png
）
no-repeat
99
%
center
，
url
（
background-tile。png
），
linear-gradient
（
to
bottom
，
yellow
，
#dddd00
50
%
，
orange
）；
background-color
：
yellow
；
}
單屬性形式
background-image
：
url
（
image
。
png
），
url
（
background-tile
。
png
）；
background-repeat
：
no-repeat
，
repeat
；
2。8 背景尺寸
動態地改變背景影象的大小。
舉例：
background-image
：
url
（
myimage
。
png
）；
background-size
：
16px
16px
；
/* 改變x和y的px值可進行縮放方法和拉伸，另外，尺寸可以是其他任意單位rem、百分比、關鍵字*/
background-size
：
contain
；
/*特殊值，不用考慮容器的大小，把影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。*/
background-size
：
contain
；
/* 特殊值，指定背景圖可以被調整到任意大小，以使背景圖完全覆蓋背景區域。*/
3。 參考連結
https：//developer。mozilla。org/zh-CN/docs/Learn/CSS/Styling_boxes/%E8%83%8C%E6%99%AF
https：//css-tricks。com/almanac/properties/b/background/
http：//www。w3school。com。cn/cssref/css_colors_legal。asp
上一篇:純新手買相機，求推薦？
下一篇：許我三生煙火 換你一世迷離
