background-image的用法_backgroundimage用法-CSDN博客

本文链接：https://blog.csdn.net/weixin_44030866/article/details/126063154

本文详细介绍了如何使用CSS的background-image设置背景图片，包括background-repeat控制重复方式、background-position定位图片、background-size调整尺寸。实例演示了如何在搜索框中应用这些技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

background-image将图片作为背景，配合使用的属性background-repeat、background-position、还有css3才有的background-size，下面通过几个图片来展示这几个结合使用实现图片作为背景（如搜索框中的一个搜索图片）

1、background-image的用法，为图像制定url：

background-image:url(./…/**.img)

2、background-repeat：有方向的额重复

主要有几个属性：repeat，默认。背景图像将在垂直方向和水平方向重复；repeat-x；repeat-y；no-repeat；

    background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: repeat;

3、background-position背景定位

有三种方法：百分数（50%、50%代表中心位置）、像素值（10px、20px代表左上角向下10px，向右20px）、和直接指定位置（center、top、bottom、left、right）

4、background-size有两个值，背景图的width和height，可以用像素（px）、百分比（%）是auto，还可以是cover和contain。

cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同

contain：保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含。

用像素：background-size:150px 80px;

百分比：background-size:40% 60%;不过需要注意的是，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。