CSS 平鋪背景圖時,有時會出現縫隙的問題。這是由于圖片的尺寸與容器的尺寸不匹配所引起的。下面將介紹一些解決縫隙的方法。
方法一:加入一像素的邊框
.container { border: 1px solid transparent; } .container img { width: 100%; height: auto; border-collapse: collapse; }
方法二:使用 transform 屬性
.container { position: relative; } .container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(0); }
方法三:使用 background-size 屬性
.container { background-image: url('your-image.png'); background-size: cover; } .container img { display: none; }
方法四:使用 background-clip 屬性
.container { background-image: url('your-image.png'); background-clip: padding-box; } .container img { display: none; }
以上就是幾種解決 CSS 平鋪出現縫隙的方法,可以根據實際情況選擇使用。