CSS如何將圖片布滿背景
在Web設計中,經常需要為背景設置圖片,但是這些圖片可能不僅僅是需要填充一小部分的背景,而是需要完全布滿整個背景。在這種情況下,我們需要一種CSS技巧來實現這個效果。下面介紹兩種方式:
/* 第一種方式,使用background-size屬性實現圖片鋪滿背景 */ body { background: url(../images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* 第二種方式,使用background-image和background-repeat屬性實現圖片鋪滿背景 */ body { background-image: url(../images/background.jpg); background-repeat: no-repeat; background-size: 100% 100%; }
第一種方式使用了background-size屬性,可實現背景圖片鋪滿整個容器,具有良好的兼容性,但需要注意的是,這種方式需要設置固定尺寸或者百分比的元素,否則無法將圖片完全鋪滿整個背景。
第二種方式使用了background-image和background-repeat屬性,設置圖片背景后,使用background-size屬性引導圖片按照100%的寬高比例鋪滿整個背景,這種方式可不必考慮元素大小的問題,但是需要注意的是該方法需要在相應容器中添加寬高值的屬性,否則沒有效果。
上一篇css設置多種字體
下一篇css怎么將文本框對齊