CSS中的背景圖是網頁設計必不可缺的一個元素,在設計中能夠提供更為豐富的視覺效果和框架裝點,關于CSS背景圖,一個非常實用的屬性是cover。
cover屬性可以幫助我們控制背景圖片的尺寸和位置,自動適應父元素的大小。它的定義是讓背景圖片自動縮放,然后使背景圖片覆蓋整個元素。
.bg{ background-image: url('image.jpg'); background-size: cover; background-position: center; }
在這個例子中,我們將class為bg的元素設置了一個背景圖片,并添加了cover屬性,此時背景圖片會自適應div的尺寸,然后覆蓋整個元素。background-position設置了背景圖片的位置為中心點,使圖片在本例中居中。
總的來說,使用background-image的cover屬性能很好的控制圖片的尺寸和位置,達到美化頁面的效果。
下一篇css背景半透明漸變