CSS 背景图片

介绍

在 CSS 中，可以使用 background-image 属性来添加背景图片到元素中。背景图片是网页设计中常用的一种视觉效果，能够增加网页的吸引力和与众不同性。

语法

selector {
  background-image: url("image.jpg");
}

属性值

• url("image.jpg"): 指定背景图片的 URL。可以是相对路径或绝对路径。相对路径是相对于 CSS 文件的路径。绝对路径是完整的 URL。
• none: 指定没有背景图片。
• inherit: 继承父元素的背景图片。

示例

下面是一些使用背景图片的示例：

/* 使用相对路径 */
body {
  background-image: url("images/background.jpg");
}

/* 使用绝对路径 */
.header {
  background-image: url("https://example.com/images/header.jpg");
}

/* 无背景图片 */
.footer {
  background-image: none;
}

背景属性

背景图片通常与其他背景属性一起使用，以控制背景图片的位置、重复、大小等。以下是一些常用的背景属性：

• background-color: 指定背景颜色。
• background-size: 指定背景图片的尺寸。
• background-position: 指定背景图片的位置。
• background-repeat: 指定背景图片的重复方式。

示例代码：

.container {
  background-image: url("background.jpg");
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

结论

通过使用 CSS 的 background-image 属性，我们可以为网页元素添加各种背景图片，从而实现更具吸引力的界面设计效果。同时，还可以通过其他背景属性来进一步调整和优化背景图片的表现。