您好,登錄后才能下訂單哦!
小編給大家分享一下css中background屬性的特點是什么,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
簡寫順序:color-image-repeat-attachment-position
eg:body{background:#ffffffurl('img.png')no-repeatrighttop}
下來按順序介紹每個屬性特點:
一、background-color:red;#ffffff;rgb(255,255,255);
三種顏色表示方法,分別是顏色名,十六進制和RGB;可以為所有元素設置背景色;默認透明。
二、background-image:url(‘img.jpg’)
圖片地址可以是相對路徑也可以是絕對路徑;默認平鋪重復顯示;
三、background-repeat:repeat-x;repeat-y;no-repeat;
默認平鋪重復顯示;
四、background-attachment:scroll;fixed;local;inherit;
background-attachment的意思是指背景圖像是否固定或者隨著頁面的其余部分滾動;默認scroll;
scroll是指背景圖片隨著頁面其余部分滾動;fixed為固定;inherit是從父元素繼承;local是隨滾動元素滾動。
五、background-position:bottomcenter;top;66%33%;50px100px;
4種表示法:一是top,left,bottom,right,center組合;二是一個值,系統默認為center;三是百分比;四是直接寫像素。
后兩種精確度高。
六、background-clip:border-box;padding-box;content-box;規定背景圖的繪制區域。
七、background-origin:border-box;padding-box;content-box;規定背景圖的定位區域。
注意:如果背景圖像background-attachment是“固定”,這個屬性沒有任何效果。
八、background-size:auto(默認);length(兩個值,一個寬一個高,一個值的話默認第二個是auto);percentage(賦值原理同length);cover(此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小);contain(此時保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最小大小);
看完了這篇文章,相信你對“css中background屬性的特點是什么”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。