css3 横向无缝背景 |html标签中设置css属性

body {
background: url(image/bg1.jpg) repeat-x;
}

代码很简单，大家只需要在body标签中设置background属性，其中url指定大家要使用的背景图片路径，repeat-x表示图片沿x轴平铺不断重复。这样就可以实现一段横向无缝的背景了。

如果大家想要将两张背景图片拼接成一个无缝的背景，该怎么办呢？大家可以使用CSS3新增的linear-gradient属性来实现。

body {
background: linear-gradient(to right, url(image/bg1.jpg), url(image/bg2.jpg));
background-size: 200% 100%;
animation: bgscroll 60s linear infinite;
}
@keyframes bgscroll {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}

在background属性中，大家通过linear-gradient指定两张背景图像，通过background-size属性将background设为了200%（即两张背景拼接后的宽度），接着通过animation属性来实现背景的滚动效果，并在@keyframes中定义背景图片的移动方式，最终实现一段无缝横向滚动的背景。

需要注意的是，这种方法在一些低版本的浏览器中可能无法正常显示，建议在使用时进行兼容性处理，或者使用其他方法来实现无缝横向背景。