在網頁設計中,背景圖片占據了很重要的位置。為了讓背景圖更好地展示,我們需要對它進行橫鋪處理。CSS中提供了很多方法可以實現這個功能,下面介紹兩種常用的方法。
第一種方法是使用background-size屬性,該屬性用于設置背景圖片的大小。我們可以設置其值為“100% auto”,表示寬度鋪滿父元素,高度按照原圖大小展示。
代碼如下:
body { background-image: url("example.jpg"); background-repeat: no-repeat; background-size: 100% auto; }實現效果如下圖: ![background-size](https://img-blog.csdn.net/20180623182420149?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpZGVvcGFzczI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/50) 第二種方法是使用CSS3中的新屬性background-repeat: round。該屬性可以自動縮放背景圖片,使其鋪滿整個父元素。需要注意的是,該屬性對于自適應網頁布局效果更佳。 代碼如下:
body { background-image: url("example.jpg"); background-repeat: round; }實現效果如下圖: ![background-repeat](https://img-blog.csdn.net/20180623182852987?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpZGVvcGFzczI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/50) 總結:無論哪種方法都可以輕松實現背景圖的橫鋪效果,具體選擇哪一種還需根據需求來定。