CSS3背景屬性的用法介紹

這篇文章主要介紹“CSS3背景屬性的用法介紹”，在日常操作中，相信很多人在CSS3背景屬性的用法介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3背景屬性的用法介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文介紹關于背景（background）的新增屬性和漸變函數（gradient），看看提供了哪些新背景元素控制和多種漸變效果的實現。

背景Background

1、background是多個背景屬性的簡寫。

backgrounf: [background-color] | [background-image] |
    [background-position][/background-size] | [background-repeat] |
[background-attachment] | [background-clip] | [background-origin], ...;

注意： 如果有 background-size 值，需要緊跟 background-position 并且用 "/" 隔開；

background-image

2、background-image屬性可以添加多張背景圖片。

不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。設置多張png圖片，可以出多張背景圖疊加的效果。

background-image: url("../../media/examples/lizard.png"),
 
  url("../../media/examples/star.png");

建議： 使用背景圖片的時候，最好也設置背景顏色（background-color），作為背景圖片不支持時的 planB。

background-size

CSS3 以前，背景圖像大小由圖像的實際大小決定。

3、background-size屬性可以指定背景圖像的大小，取值像素或百分比。

（相對于父元素的寬度和高度的百分比的大?。?。

圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸：

cover：保持圖像的寬高比例，縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。

contain：保持圖像的寬高比例，縮放背景圖片以完全裝入背景區，可能背景區部分空白。

一個值：這個值指定圖片的寬度，圖片的高度隱式的為 auto

兩個值：第一個值指定圖片的寬度，第二個值指定圖片的高度

background-origin

background-origin規定了指定背景圖片屬性的原點位置的背景相對區域。

注意： 當使用 background-attachment 為 fixed 時，該屬性將被忽略不起作用。

到此，關于“CSS3背景屬性的用法介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！