如何设置html中background

详解 html 中 background-image 属性的设置

在 html 中，background-image 属性用于为元素设置背景图像，它能为网页增添丰富的视觉效果。

基本语法

background-image 属性的基本语法如下：

```css

selector {

background-image: url(⁄'image-url⁄');

}

```

这里的 selector 是你想要应用背景图像的 html 元素选择器，而 image-url 则是图像文件的路径。这个路径可以是相对路径，也可以是绝对路径。

多个背景图像

你还可以设置多个背景图像，只需用逗号分隔它们的 url：

```css

selector {

background-image: url(⁄'image1.jpg⁄'), url(⁄'image2.jpg⁄');

}

```

多个背景图像会按照你指定的顺序堆叠显示。

背景图像重复

默认情况下，背景图像会在元素内重复显示。你可以通过 background-repeat 属性来控制重复方式：

- repeat：水平和垂直方向都重复（默认值）。

- repeat-x：仅水平方向重复。

- repeat-y：仅垂直方向重复。

- no-repeat：不重复。

例如：

```css

selector {

background-image: url(⁄'image.jpg⁄');

background-repeat: no-repeat;

}

```

背景图像定位

使用 background-position 属性可以指定背景图像在元素内的位置。你可以使用像素值、百分比或关键字（如 top、center、bottom、left、right 等）。

例如：

```css

selector {

background-image: url(⁄'image.jpg⁄');

background-position: center top;

}

```

这会将背景图像定位在元素的垂直居中且顶部对齐的位置。

背景图像大小

background-size 属性允许你控制背景图像的大小。你可以指定具体的像素值、百分比，或者使用 cover 和 contain 关键字。

- cover：将背景图像扩展至足够大，以完全覆盖元素，可能会裁剪图像。

- contain：将背景图像收缩至最小，以适应元素的宽度或高度，图像不会被裁剪。

例如：

```css

selector {

background-image: url(⁄'image.jpg⁄');

background-size: cover;

}

```

通过合理设置 background-image 属性及其相关属性，你可以为网页创建出独特而吸引人的背景效果。