Css背景和漸變屬性有哪些

本文小編為大家詳細介紹“Css背景和漸變屬性有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Css背景和漸變屬性有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1.背景繪制區域

background-clip

設置背景顯示區域

屬性：background-clip

值：border-box：背景被裁剪到邊框，默認值

padding-box：背景被裁減到內邊距框(忽略內邊距)

content-box：背景被裁減到內容框上(只顯示內容區域)

2.背景的定位區域

背景從哪開始畫

屬性：background-origin

取值：border-box：從邊框開始畫

padding-box：從內邊距處開始畫

content-box：從內容區域上開始畫

3.背景合并

屬性：background:

background：color url() repeat attachment position;

常用方式:

background：url repeat position;

background：url(images/1.jpg) no-repeat -15px 20px;

background-image：url();

background-repeat：no-repeat;

background-position：-15px 20px;

background：red;

background：url(1.jpg);

漸變

多個顏色值之間平緩過度

漸變分類：

1、線性漸變

2、徑向漸變

3、重復漸變

注意：

所有的漸變，都是通過 background-image 進行設置

線性漸變：linear-gradient

徑向漸變：radial-gradient

重復線性：repeating-linear-gradient

重復徑向：repeating-radial-gradient

background-image:linear-gradient();

1、線性漸變

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

angle:

取值范圍有：關鍵詞：to top ,to bottom ,to right ,

角度： 0deg --> to top

90deg -->to right

180deg --> to bottom

color-point：漸變顏色的開始點、中間過渡點、結束點

取值范圍有：

red 0%：從開始處顯示紅色

green 50%： 到 50% 位置處 ，變成綠色

blue 100% ： 到結尾處，變為藍色

2、徑向漸變

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

size at position：size即放射的圓形的半徑 position即原點所在坐標

left top bottom right center

3、重復漸變

background-image：repeating-linear-gradient(to bottom,red 0,green 10px)；

4、瀏覽器兼容性

對不支持的版本，通過前綴

Firefox： -moz-

Chrome,Safar： -webkit-

Opera ：-o-

background-image：-webkit-linear-gradient(to bottom,red,green); Chrome Safari

background-image：-o-linear-gradient(to bottom,red,green); Opera

background-image：-moz-linear-gradient(to bottom,red,green); Firefox

讀到這里，這篇“Css背景和漸變屬性有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。