一、CSS 背景概述

背景屬性的作用

? - 背景樣式可以控制 HTML 元素的背景顏色、背景圖像等?

? - 背景色

? ? ? - 設(shè)置單一的顏色作為背景

? - 背景圖像

? ? ? - 以圖片作為背景

? ? ? - 可以設(shè)置圖像的位置、平鋪、尺寸等

二、CSS 背景屬性

背景色 background-color?

? -?屬性用于為元素設(shè)置背景色

? ? ? - 接受任何合法的顏色值

? ? ? - 可取值為 transparent

? - 為元素背景設(shè)置一種純色

? ? ? - 會(huì)填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域

? ? ? - 如果邊框右透明的部分，會(huì)透過這些透明部分顯示出背景色

背景圖片?background-p_w_picpath?

? - 默認(rèn)值是 none,表示背景上沒有放置任何圖像

? - 如果需要設(shè)置一個(gè)背景圖像，需要用起始字母 url 附帶一個(gè)圖像的 URL 值

? ? ? - 可以是相對(duì) URL 或者絕對(duì) URL

背景重復(fù)?background-repeat

? - 默認(rèn)情況下，背景圖像在水平和垂直方向上重復(fù)出現(xiàn)(平鋪)，創(chuàng)建一種稱為"墻紙"的效果

? - 可以使用?background-repeat 屬性控制背景圖像的平鋪效果

? - background-repeat 可取值為

? ? ? - repeat ? :在垂直方向和水平方向重復(fù)，為默認(rèn)值

? ? ? - repeat-x :僅在水平方向重復(fù)

? ? ? - repeat-y :僅在垂直方向重復(fù)

? ? ? - no-repeat:僅顯示一次

背景圖片尺寸?background-size

? - 規(guī)定背景圖像的尺寸，可取值為

? ? ? - value1,value2 : 寬度,高度

? ? ? - value1% value2% : 百分比

? ? ? - cover: 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域，圖片的某些部分也許無法顯示

? ? ? - contain: 把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域

背景圖片的固定?background-p_w_upload

? - 默認(rèn)情況下，背景圖像會(huì)隨著頁面的滾動(dòng)而移動(dòng)

? - 可以通過?background-p_w_upload 屬性來設(shè)置

? ? ? - 默認(rèn)值是 scroll: 默認(rèn)情況下，背景會(huì)隨文檔滾動(dòng)

? ? ? - 可取值為 fixed : 背景圖像固定，并不會(huì)隨著頁面的其余部分滾動(dòng)，常用于實(shí)現(xiàn)稱為水印的圖像

背景圖片的固定?background-position

? - background-position 屬性改變圖像在背景中的位置

? - 該屬性的取值為

背景圖片的固定?background-clip

? - background-clip 屬性規(guī)定背景的繪制區(qū)域

??- 可取值為? ? ?

? ? ? - border-box: ?背景被裁剪到邊框盒，為默認(rèn)值

? ? ? - padding-box: 背景被裁剪到內(nèi)邊距框

? ? ? - content-box: 背景被裁剪到內(nèi)容框

背景的定位區(qū)域?background-origin

? - background-origin 屬性規(guī)定背景圖片的定位區(qū)域

??- 可取值為 ??

? ? ? - border-box :背景圖像相對(duì)于邊框來定位

? ? ? - padding-box:背景圖像相對(duì)于內(nèi)邊距框來定位

? ? ? - content-box:背景圖像相對(duì)于內(nèi)容框來定位

背景屬性?background

? - background 屬性在一個(gè)聲明中設(shè)置所有的背景屬性

??- 語法結(jié)構(gòu)是:

? ? ? - background: color url(圖像URL) repeat p_w_upload position;

? - 如果不設(shè)置其中的某個(gè)值，將使用默認(rèn)值

三、CSS 漸變屬性

漸變概念

? - 漸變指，兩種或者多種顏色之間的平滑過渡

? - 可以指定多個(gè)中間顏色值(色標(biāo))

? ? ? - 每個(gè)色標(biāo)包含一種顏色和一個(gè)位置

? ? ? - 每個(gè)色標(biāo)的顏色淡出到下一個(gè)，以創(chuàng)建平滑的漸變

? - 漸變可以用在任何使用背景圖片的地方

? ? ? - 線性漸變

? ? ? - 徑向漸變

? ? ? - 重復(fù)漸變

漸變語法

? - 使用background-p_w_picpath屬性進(jìn)行設(shè)置

? - 可以取值

? ? ? - linear-gradient : 線性漸變

? ? ? - radial-gradient : 徑向漸變

? ? ? - repeating-linear-gradient : 重復(fù)線性漸變

? ? ? - repeating-radial-gradient : 重復(fù)徑向漸變

線性漸變

? - linear-gradient(angle,color-point1,color-point2,...)

? ? ? - angle: 為第一個(gè)參數(shù)，指定漸變的方向，可以是角度值，也可以是關(guān)鍵詞，如 to top(對(duì)應(yīng)0deg),to right(對(duì)應(yīng) 90deg),to bottom(對(duì)應(yīng)180deg),to left(對(duì)應(yīng)270deg)

? ? ? - color-point: 表示顏色的起始點(diǎn)、中間點(diǎn)或者結(jié)束點(diǎn)，取值為顏色和位置的組合，如 red 0%、green 50%

徑向漸變

? - redial-gradient([size at position],color-point1,color-point2,...)

? ? ? - position:為第一個(gè)參數(shù)，指定漸變的圓心位置，默認(rèn)值為center;可以取值為數(shù)值、百分比，或者關(guān)鍵字;此參數(shù)可以省略

? ? ? - color-point: 表示顏色的起始點(diǎn)、中間點(diǎn)或者結(jié)束點(diǎn)，取值為顏色和位置的組合，如 red 0%、green 50%

重復(fù)漸變

? - 重復(fù)線性漸變

? ? ? - repeating-linear-gradient(angle,color-point1,color-point2,...)

? - 重復(fù)徑向漸變

? ? ? - repeating-radial-gradient([size at position],color-point1,color-point2,...)

瀏覽器兼容性

? - 目前，各瀏覽器的新版本均支持漸變屬性

? - 對(duì)于不支持的版本

? ? ? - Firefox 需要前綴 -moz-

? ? ? - Chrome 和 Safari 需要前綴 -webkit-

? ? ? - Opera?需要前綴 -o-

總結(jié)：本章內(nèi)容主要介紹了 Css 背景、漸變屬性。

轉(zhuǎn)載于:https://blog.51cto.com/jasonteach/1753846

總結(jié)

以上是生活随笔為你收集整理的Css3之基础-5 Css 背景、渐变属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。