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即可。