背景 CSS 图片

在 CSS 中，可以使用背景图片来为 HTML 元素添加装饰或图像。背景图片可以是一个单独的颜色，一个简单的图像或者一个重复的图案。

使用 CSS 设置背景图片

使用 CSS 设置背景图片需要在样式表中使用 background-image 属性。下面是设置背景图片的基本语法：

background-image: url("path/to/image.jpg");

在实际使用中，通常需要指定一些其他参数来更好地控制背景图片的显示效果。下面演示一些常用的背景图片控制参数：

背景重复

background-repeat 属性指定当背景图片不足以填满整个元素时，是否应该重复显示。常用的取值有：

• repeat：默认值，表示在水平和垂直方向都重复；
• repeat-x：表示只在水平方向重复；
• repeat-y：表示只在垂直方向重复；
• no-repeat：表示不重复，仅显示一次。

下面是一个示例：

background-repeat: repeat-x;

背景大小

background-size 属性指定背景图片的大小。常用的取值有：

• auto：默认值，表示使用原始大小；
• cover：表示按比例缩放背景图片以完全覆盖元素，可能剪切部分图片；
• contain：表示按比例缩放背景图片以完整显示在元素上。

下面是一个示例：

background-size: contain;

背景定位

background-position 属性指定背景图片相对于元素布局位置的偏移量。常用的取值有：

• top、bottom、left、right：表示相对于元素的上、下、左、右边缘对齐；
• center：表示在元素的中间居中对齐；
• 具体数值：表示相对于元素左上角的偏移量，以像素或百分比为单位。

下面是一个示例：

background-position: center;

实战演练

下面通过一个实战演练来展示如何在实际中应用上述背景图片相关的 CSS 属性。

首先，我们在 HTML 中添加一个带有 ID 的 DIV 元素：

<div id="banner">Hello, World!</div>

然后，在 CSS 中添加下面的样式规则：

#banner {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    text-align: center;
    font-size: 3em;
    color: white;
    padding-top: 100px;
}

其中，我们添加了一个背景图片，并将其重复方式设为不重复，大小设为完全覆盖元素，并在中心对齐。同时，我们还设置了元素的高度、文字居中以及其他样式。

最后，我们得到了一个漂亮的背景图片效果，类似下面这样：

总结

使用 CSS 设置背景图片是网页布局中常见的技巧之一。掌握了上述常用的 CSS 属性，开发人员可以轻松地实现各种背景图片效果。