CSS背景圖片平鋪

一、CSS背景圖片平鋪填滿

如果想要讓背景圖片填滿整個元素，只需設置CSS屬性“background-size: cover;”即可，此時背景圖片會按比例縮放，以填滿整個元素。

background-image: url('image.png');
background-size: cover;

但是需要注意的是，如果圖片比例和容器比例不同，會有部分裁剪掉。如果想要保證整張圖片完整顯示，可以設置CSS屬性“background-size: contain;”。

background-image: url('image.png');
background-size: contain;

二、CSS背景圖片平鋪造成間隙

CSS背景圖片平鋪時會有一個問題，就是如果兩個背景圖片相接的時候，可能會出現間隙。這是因為不同瀏覽器對於像素處理的方式不同，造成了像素的精度誤差。解決這個問題有幾個方法：

1、為背景圖片添加半透明邊框，這樣背景圖片就會重疊在一起，遮住了間隙。

background-image: url('image.png');
border: 1px solid rgba(0, 0, 0, 0.5);

2、使用CSS3的“background-clip: padding-box;”屬性，可以讓背景圖片不會超出元素的邊框，從而避免了間隙問題。

background-image: url('image.png');
background-clip: padding-box;

三、CSS背景圖怎麼平鋪帶間隔

有時候我們需要讓背景圖片重複出現，但是每個背景圖片之間留有一定的空隙。我們可以通過CSS屬性“background-repeat: space;”實現，在瀏覽器支持的情況下，它會讓背景圖片自動等間隔重複。

background-image: url('image.png');
background-repeat: space;

四、背景圖片平鋪CSS

當我們不需要讓背景圖片重複變化的時候，只需要設置CSS屬性“background-repeat: no-repeat;”即可。此時背景圖片只會出現一次。

background-image: url('image.png');
background-repeat: no-repeat;

五、HTML背景圖片平鋪

在HTML中也可以指定背景圖片。只需要使用style屬性即可：

原創文章，作者：HSHE，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/136461.html