css如何設定背景圖片的平鋪方式?本文就為大家介紹css是如何設定背景圖片平舖的方法,讓大家了解在css中設定背景圖片水平方法平鋪、垂直方向平鋪,或是不平舖的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。
當我們使用background-image屬性讓一張背景圖片在頁面上顯示時,背景圖片有可能會因為一些原因(例如圖片尺寸)從而會以水平方向和垂直方向上同時平舖的方式顯示,如下圖:
但有時我們不需要這樣的背景圖片顯示方法,單單只是想要背景圖片僅顯示一次(不平鋪),或者單獨實現水平方向平鋪,垂直方向平鋪。這些平鋪方式我們可以用css實現!
那麼在css中如何設定背景圖片的平鋪方式?其實很簡單,css background-repeat屬性就可以設定背景圖片的平鋪方式。 background-repeat屬性可以透過設定以下的屬性值來實現背景圖片的水平方向平鋪、垂直方向平鋪,或不平鋪、完全平鋪。
repeat:預設值,設定背景影像在垂直方向和水平方向平鋪,即:完全平鋪。
repeat-x :設定背景影像在水平方向平鋪。
repeat-y :設定 背景影像在垂直方向平鋪。
no-repeat:設定背景影像不平鋪,即:僅顯示一次。
下面我們就透過簡單的程式碼範例來了解這些屬性值的實作方法:
1、repeat 設定背景圖片完全平鋪
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
效果圖:
2、no-repeat 設定背景圖片不平鋪
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
效果圖:
3、repeat-x 設定背景影像在水平方向平鋪
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
效果圖:
4、repeat-y 設定 背景影像在垂直方向平鋪
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
效果圖:
關於background-repeat屬性有以下說明:
從原始圖像開始重複,原始圖像由 background-image 定義;需要先定義原始圖像,在使用background-repeat屬性設定平鋪方式。
背景圖像的位置是根據 background-position 屬性設定的。如果未規定 background-position 屬性,影像會被放置在元素的左上角。
總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關教學請訪問 CSS影片教學, CSS3影片教學!
相關推薦:
#以上是css如何設定背景圖片的平鋪方式? css設定背景圖片平舖的方法(圖文詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!