2025-06-11 13:14:01 作者：daqian 来源：35bo
在html中，background-image属性用于设置元素的背景图像。这一属性为网页增添视觉效果提供了强大支持。
首先，background-image属性的基本语法很简单，只需指定图像的url即可。例如：body { background-image: url(⁄'image.jpg⁄'); } 这里的⁄'image.jpg⁄'就是要设置为背景的图像文件名，url可以是相对路径（相对于当前html文件的路径），也可以是绝对路径。
背景图像的重复方式也可灵活控制。默认情况下，背景图像会在水平和垂直方向重复平铺，以填满整个元素。若想让背景图像只在水平方向重复，可使用background-repeat: repeat-x; 只在垂直方向重复则用background-repeat: repeat-y; 不想让图像重复，使用background-repeat: no-repeat; 。
还能通过background-position属性来精准定位背景图像。其取值方式多样，既可以使用关键字，如top left、center center等，也可以使用具体的像素值或百分比。比如background-position: 50% 50%; 表示将图像水平和垂直方向都居中显示。
背景图像的大小也能进行调整。background-size属性可以设置图像的宽度和高度。可以使用具体的像素值，如background-size: 200px 300px; 也可以使用百分比，相对于元素的大小。另外，cover值会让图像缩放以完全覆盖元素，可能会裁剪部分图像；contain值则会使图像缩放以适应元素，图像会保持完整。
如果希望背景图像固定在页面上，不随页面滚动而移动，可使用background-attachment: fixed; 例如应用在body元素上，整个页面滚动时背景图像都保持静止。
当一个元素有多个背景图像时，只需在background-image属性中用逗号分隔多个图像url即可。如body { background-image: url(⁄'image1.jpg⁄'), url(⁄'image2.jpg⁄'); } 此时，这些背景图像会按照顺序堆叠显示，且每个图像都可分别设置重复、定位、大小等属性。
background-image属性通过这些丰富的设置选项，能为网页打造出各种独特且吸引人的背景效果，满足多样化的设计需求。
