Css入门: background-image（背景图片）

介绍

CSS的background-image属性用于设置元素的背景图片。通过使用背景图片，可以为网页添加视觉效果和吸引力。

语法

background-image属性的语法如下：

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

其中，selector是要应用背景图片的元素的选择器，url(“image.jpg”)是图片的URL地址。

示例

以下示例演示了如何使用background-image属性：

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

上述代码将body元素的背景图片设置为名为background.jpg的图片。

重复背景图片

默认情况下，背景图片会在元素中重复显示。可以使用background-repeat属性来控制背景图片的重复方式。

background-repeat属性有以下几个值：

• repeat: 默认值，背景图片在水平和垂直方向上重复。
• repeat-x: 背景图片只在水平方向上重复。
• repeat-y: 背景图片只在垂直方向上重复。
• no-repeat: 背景图片不重复。

以下示例演示了如何使用background-repeat属性：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

上述代码将body元素的背景图片设置为名为background.jpg的图片，并且不重复显示。

定位背景图片

可以使用background-position属性来控制背景图片的位置。

background-position属性有以下几个值：

• left top: 背景图片位于左上角。
• left center: 背景图片位于左侧中间。
• left bottom: 背景图片位于左下角。
• center top: 背景图片位于中间顶部。
• center center: 背景图片位于中间。
• center bottom: 背景图片位于中间底部。
• right top: 背景图片位于右上角。
• right center: 背景图片位于右侧中间。
• right bottom: 背景图片位于右下角。

以下示例演示了如何使用background-position属性：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

上述代码将body元素的背景图片设置为名为background.jpg的图片，并且在中间显示。

总结

通过使用CSS的background-image属性，可以为网页元素添加背景图片，从而增加视觉效果和吸引力。可以使用background-repeat属性控制背景图片的重复方式，使用background-position属性控制背景图片的位置。

相关链接

了解更多关于CSS的信息，请访问晴川云官网。