本文小編為大家詳細介紹“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背景和漸變屬性有哪些”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。