css平铺图片时有缝

在开发过程中，经常会碰到需要平铺图片的情况。不过，很多开发者在使用CSS平铺图片时会出现图片间有缝的情况，影响页面美观度。下面我们来看一下这个问题的解决方法：

.background {
        background: url(url/to/image.jpg) repeat;
}
    

平铺图片时，我们通常会使用repeat参数进行设置。这时候可以加上一些其他的参数来修复图片的缝隙。

-webkit-background-clip: padding-box; 用于之前出现在iOS中图片边缘有缝的情况，具体是由background-clip: border-box; 导致的，所以我们需要使用webkit前缀的样式。

-moz-background-origin: padding; 用于Firefox下解决图片缝隙的问题。

-webkit-box-sizing: border-box; 用于解决在Safari和Chrome下使用flex布局图片出现缝隙的情况。

如下所示，我们可以将上面的参数都加上，解决图片缝隙的问题：

.background {
        background: url(url/to/image.jpg) repeat;
        -webkit-background-clip: padding-box;
        -moz-background-origin: padding;
        -webkit-box-sizing: border-box;
}
    

这样的话，我们就可以愉快地使用CSS平铺图片了，而不必担心图片间出现缝隙的问题啦。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！