CSS3中新增的背景屬性和漸變函數(shù)有哪些

這篇文章主要介紹了CSS3中新增的背景屬性和漸變函數(shù)有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

背景 Background

background 是多個(gè)背景屬性的簡(jiǎn)寫，

backgrounf: [background-color] | [background-image] |
    [background-position][/background-size] | [background-repeat] |
    [background-attachment] | [background-clip] | [background-origin], ...;

注意： 如果有 background-size 值，需要緊跟 background-position 并且用 "/" 隔開；

background-image

background-image 屬性可以添加多張背景圖片，不同的背景圖像和圖像用逗號(hào)隔開，所有的圖片中顯示在最頂端的為第一張。設(shè)置多張 png 圖片，可以出多張背景圖疊加的效果。

background-image: url("../../media/examples/lizard.png"),
  url("../../media/examples/star.png");

建議： 使用背景圖片的時(shí)候，最好也設(shè)置背景顏色（background-color），作為背景圖片不支持時(shí)的 planB。

background-size

CSS3 以前，背景圖像大小由圖像的實(shí)際大小決定。在 CSS3 中，background-size 屬性可以指定背景圖像的大小，取值像素或百分比（相對(duì)于父元素的寬度和高度的百分比的大?。?。

圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時(shí)縮放到元素的可用空間的尺寸：

• cover：保持圖像的寬高比例，縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見。

• contain：保持圖像的寬高比例，縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白。

• 一個(gè)值：這個(gè)值指定圖片的寬度，圖片的高度隱式的為 auto

• 兩個(gè)值：第一個(gè)值指定圖片的寬度，第二個(gè)值指定圖片的高度

background-origin

background-origin 規(guī)定了指定背景圖片 background-image 屬性的原點(diǎn)位置的背景相對(duì)區(qū)域。

注意： 當(dāng)使用 background-attachment 為 fixed 時(shí)，該屬性將被忽略不起作用。

• border-box背景圖片的擺放以 border 區(qū)域?yàn)閰⒖?/p>

• padding-box背景圖片的擺放以 padding 區(qū)域?yàn)閰⒖?/p>

• content-box背景圖片的擺放以 content 區(qū)域?yàn)閰⒖?/p>

background-clip

background-clip 背景剪裁屬性是指定背景（背景圖片或顏色）的繪制區(qū)域。

• border-box：背景區(qū)域延伸到邊框（但是在邊框下層）

  
  

• padding-box：背景區(qū)域延伸到內(nèi)邊距

  
  

• content-box：背景區(qū)域延伸到內(nèi)容區(qū)

  
  

• text：背景被裁剪成文字的前景色。需要加上前綴 -webkit-background-clip: text;

  
  

漸變 Gradient

CSS3 漸變（gradients）可以讓在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。對(duì)比使用漸變圖片，gradients 可以減少下載的時(shí)間和寬帶的使用，并且在放大時(shí)看起來效果更好。

線形漸變

顏色值沿著一條隱式的直線逐漸過渡。由 linear-gradient() 產(chǎn)生。

為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色節(jié)點(diǎn)。顏色節(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。

/* 漸變軸為45度，從藍(lán)色漸變到紅色 */
linear-gradient(45deg, blue, red);

/* 從右下到左上、從藍(lán)色漸變到紅色 */
linear-gradient(to left top, blue, red);

/* 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);

語法

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

• <angle>：用角度值指定漸變的方向（或角度）。角度順時(shí)針增加。

  
  

• <side-or-corner>：描述漸變線的起始點(diǎn)位置。to top, to bottom, to left 和 to right 這些值會(huì)被轉(zhuǎn)換成角度 0 度、180 度、270 度 和 90 度。其余值會(huì)被轉(zhuǎn)換為一個(gè)以向頂部中央方向?yàn)槠瘘c(diǎn)順時(shí)針旋轉(zhuǎn)的角度。漸變線的結(jié)束點(diǎn)與其起點(diǎn)中心對(duì)稱。

• <color-stop-list>：顏色變化列表。支持透明度（rgba(255,0,0,0.1)）。

徑向漸變

radial-gradient() CSS 函數(shù)創(chuàng)建了一個(gè)圖像，該圖像的顏色值由一個(gè)中心點(diǎn)（原點(diǎn)）向外擴(kuò)散并逐漸過渡到其他顏色值。

同樣至少需要定義兩種顏色節(jié)點(diǎn)，也可以指定漸變的中心（默認(rèn)在中心點(diǎn)，center）、形狀（默認(rèn)橢圓形 ellipse）、大小（默認(rèn) farthest-corner，表示到最遠(yuǎn)的角落）

語法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)

• shape：橢圓形（ellipse，默認(rèn)）或圓形（circle）

• size：

• closest-side， 漸變的邊緣形狀與容器距離漸變中心點(diǎn)最近的一邊相切（圓形）或者至少與距離漸變中心點(diǎn)最近的垂直和水平邊相切（橢圓）。

• closest-corner， 漸變的邊緣形狀與容器距離漸變中心點(diǎn)最近的一個(gè)角相交。

• farthest-side， 與 closest-side 相反，邊緣形狀與容器距離漸變中心點(diǎn)最遠(yuǎn)的一邊相切（或最遠(yuǎn)的垂直和水平邊）。

• farthest-corner， 漸變的邊緣形狀與容器距離漸變中心點(diǎn)最遠(yuǎn)的一個(gè)角相交。

• position：可以是具體的兩個(gè)位置偏移值（10% 20%），也可以是關(guān)鍵字（left、right、top、bottom）

重復(fù)漸變

重復(fù)多次漸變圖案直到足夠填滿指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函數(shù)產(chǎn)生。

重復(fù)函數(shù)的參數(shù)同上，不同的是它會(huì)基于漸變長(zhǎng)度（最后一個(gè)色標(biāo)和第一個(gè)之間的距離）倍數(shù)重復(fù)。

.linear-repeat {  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}.radial-repeat {  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3中新增的背景屬性和漸變函數(shù)有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!