css怎么设置图片平铺

寻技术 Html/CSS 2023年08月30日 85

这篇文章主要介绍了css怎么设置图片平铺的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么设置图片平铺文章都会有所收获,下面我们一起来看看吧。

  1. 重复(repeat)

重复是CSS中最常用的图片平铺方式,当设置背景图片的大小小于容器大小时,图片会重复出现直到填满容器。重复的语法如下:

background-repeat: repeat;

使用这种方式非常简单,只需要在CSS样式表中的背景属性后添加repeat即可,如下所示:

background: url(images/bg.jpg) repeat;

这样背景图片就会在页面上重复出现,直到填满整个容器。

  1. 水平重复(repeat-x)

水平重复是指在横向上重复出现背景图片,并且垂直方向不重复。当容器宽度大于背景图片时,图片会横向平铺直到填满整个容器,而垂直方向不会重复。水平重复的语法如下:

background-repeat: repeat-x;

与重复相比,只需要将语法中的repeat替换成repeat-x即可,如下所示:

background: url(images/bg.jpg) repeat-x;

这样背景图片就会在页面上横向平铺直到填满整个容器,而不会在垂直方向上重复。

  1. 竖直重复(repeat-y)

竖直重复是指在纵向上重复出现背景图片,并且横向方向不重复。当容器高度大于背景图片时,图片会纵向平铺直到填满整个容器,而横向方向不会重复。竖直重复的语法如下:

background-repeat: repeat-y;

与重复相比,只需要将语法中的repeat替换成repeat-y即可,如下所示:

background: url(images/bg.jpg) repeat-y;

这样背景图片就会在页面上纵向平铺直到填满整个容器,而不会在横向方向上重复。

关闭

用微信“扫一扫”