css-背景設置

背景設置 background:

? ? background-color: 背景顏色設置

? ? background-image:url() 背景圖片設置

? ? background-repeat: repeat-x | repeat-y | no-repeat;背景平鋪設置

? ? background-position: x y;背景定位設置

? ? background-size:; 背景尺寸設置

背景簡寫形式 官方?jīng)]有提供固定順序

background : background-color ?background-image ?background-position ?background-repeat;

顏色單位：

? ? 十六進制色

? ? RGB顏色

? ? GRBA顏色

? ? HSL顏色

? ? 英語單詞

? ? transparent

十六進制顏色：

十六進制顏色是這樣規(guī)定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數(shù)規(guī)定了顏色的成分。所有值必須介于 0 與 FF 之間。

舉例說，#0000ff 值顯示為藍色，這是因為藍色成分被設置為最高值（ff），而其他成分被設置為 0。

div{background-color:#0000ff;}

RGB顏色：

RGB 顏色值是這樣規(guī)定的：rgb(red, green, blue)。每個參數(shù) (red、green 以及 blue) 定義顏色的強度，

可以是介于 0 與 255 之間的整數(shù)，或者是百分比值（從 0% 到 100%）。

舉例說，rgb(0,0,255) 值顯示為藍色，這是因為 blue 參數(shù)被設置為最高值（255），而其他被設置為 0。

?div{background-color:rgb(255,0,0);}

RGBA顏色：

RGBA 顏色值是 RGB 顏色值的擴展，帶有一個 alpha 通道 - 它規(guī)定了對象的不透明度。

RGBA 顏色值是這樣規(guī)定的：rgba(red, green, blue, alpha)。alpha 參數(shù)是介于 0.0（完全透明）與 1.0（完全不透明）的數(shù)字.

p

{

background-color:rgba(255,0,0,0.5);

}

HSL顏色：

HSL 指的是 hue（色調）、saturation（飽和度）、lightness（亮度） - 表示顏色柱面坐標表示法。

HSL 顏色值是這樣規(guī)定的：hsl(hue, saturation, lightness)。

Hue 是色盤上的度數(shù)（從 0 到 360） - 0 (或 360) 是紅色，120 是綠色，240 是藍色。Saturation 是百分比值；

0% 意味著灰色，而 100% 是全彩。Lightness 同樣是百分比值；0% 是黑色，100% 是白色。

div{background-color:hsl(120,65%,75%);}

英語單詞：

div

{

background-color:red;

}

多背景,多個屬性用逗號隔開

background-image:url("img/dog1.jpg"),url("img/dog2.jpg"),url("img/dog3.jpg");

background-position ?：可以設置像素(支持正負數(shù))，可以設置方向和百分比(left=0%,center=50%,right=100%)*/

? ? background-position: 50%;

? ? background-position: 0 0,100% 0;

background-size : width height | cover |contain;

圖片寬度或者高度有一邊接觸到內容的邊界，就不再放大，可能沒有鋪滿整個內容

鋪滿的一個效果，基于比例，可以做延伸，自適應。搭配center使用，一直顯示圖片中間的部分