淘先锋技术网

首页 1 2 3 4 5 6 7

CSS是前端开发中必不可少的一部分,它可以实现各种酷炫的效果。其中,图片水平平铺是一种比较常见的效果,让我们来学习一下这个效果的实现方法吧。

body {
background-image: url(bg.jpg);
background-size: auto;
background-repeat: repeat-x;
}

以上就是实现图片水平平铺的CSS代码。通过设置background-image为想要平铺的图片地址,然后把background-size设置为auto,background-repeat设置为repeat-x即可。

其中,background-size有以下几个属性值:

  • auto:图片自适应大小
  • px: 设定具体大小
  • cover:保持图片比例缩放图片以全覆盖容器
  • contain:保持图片比例缩放图片以完整显示在容器内

而background-repeat有以下几个属性值:

  • repeat:将图片在垂直和水平方向均分平铺
  • repeat-x:将图片在水平方向平铺
  • repeat-y:将图片在垂直方向平铺
  • no-repeat:图片不平铺

总结一下,想要实现图片水平平铺,只需要设置background-size为auto,background-repeat为repeat-x即可。