一、CSS 背景概述

背景屬性的作用

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

? - 背景色

? ? ? - 設置單一的顏色作為背景

? - 背景圖像

? ? ? - 以圖片作為背景

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

二、CSS 背景屬性

背景色 background-color?

? -?屬性用于為元素設置背景色

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

? ? ? - 可取值為 transparent

? - 為元素背景設置一種純色

? ? ? - 會填充元素的內容、內邊距和邊框區域

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

背景圖片?background-p_w_picpath?

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

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

? ? ? - 可以是相對 URL 或者絕對 URL

背景重復?background-repeat

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

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

? - background-repeat 可取值為

? ? ? - repeat ? :在垂直方向和水平方向重復，為默認值

? ? ? - repeat-x :僅在水平方向重復

? ? ? - repeat-y :僅在垂直方向重復

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

背景圖片尺寸?background-size

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

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

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

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

? ? ? - contain: 把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域

背景圖片的固定?background-p_w_upload

? - 默認情況下，背景圖像會隨著頁面的滾動而移動

? - 可以通過?background-p_w_upload 屬性來設置

? ? ? - 默認值是 scroll: 默認情況下，背景會隨文檔滾動

? ? ? - 可取值為 fixed : 背景圖像固定，并不會隨著頁面的其余部分滾動，常用于實現稱為水印的圖像

背景圖片的固定?background-position

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

? - 該屬性的取值為

背景圖片的固定?background-clip

? - background-clip 屬性規定背景的繪制區域

??- 可取值為? ? ?

? ? ? - border-box: ?背景被裁剪到邊框盒，為默認值

? ? ? - padding-box: 背景被裁剪到內邊距框

? ? ? - content-box: 背景被裁剪到內容框

背景的定位區域?background-origin

? - background-origin 屬性規定背景圖片的定位區域

??- 可取值為 ??

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

? ? ? - padding-box:背景圖像相對于內邊距框來定位

? ? ? - content-box:背景圖像相對于內容框來定位

背景屬性?background

? - background 屬性在一個聲明中設置所有的背景屬性

??- 語法結構是:

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

? - 如果不設置其中的某個值，將使用默認值

三、CSS 漸變屬性

漸變概念

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

? - 可以指定多個中間顏色值(色標)

? ? ? - 每個色標包含一種顏色和一個位置

? ? ? - 每個色標的顏色淡出到下一個，以創建平滑的漸變

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

? ? ? - 線性漸變

? ? ? - 徑向漸變

? ? ? - 重復漸變

漸變語法

? - 使用background-p_w_picpath屬性進行設置

? - 可以取值

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

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

? ? ? - repeating-linear-gradient : 重復線性漸變

? ? ? - repeating-radial-gradient : 重復徑向漸變

線性漸變

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

? ? ? - angle: 為第一個參數，指定漸變的方向，可以是角度值，也可以是關鍵詞，如 to top(對應0deg),to right(對應 90deg),to bottom(對應180deg),to left(對應270deg)

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

徑向漸變

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

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

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

重復漸變

? - 重復線性漸變

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

? - 重復徑向漸變

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

瀏覽器兼容性

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

? - 對于不支持的版本

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

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

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

總結：本章內容主要介紹了 Css 背景、漸變屬性。

轉載于:https://blog.51cto.com/jasonteach/1753846

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。