CSS 背景图像

CSS 背景图像

• background-image 属性指定用作元素背景的图像。
• 默认情况下，图像会重复，以覆盖整个元素。

实例
页面的背景图像可以像这样设置：

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

还可以为特定元素设置背景图像，例如 <p> 元素：

p {
  background-image: url("paper.gif");
}

---

CSS 背景图像重复

• 水平重复图像，设置 background-repeat: repeat-x;
• 垂直重复图像，设置 background-repeat: repeat-y;
• 只显示一次背景图像，设置 background-repeat: no-repeat;

实例：

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

---

CSS背景图像位置

• background-position 属性用于指定背景图像的位置。

实例：
把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

---

CSS 背景附着

• 固定背景图像，设置 background-attachment: fixed;
• 指定背景图像随页面滚动，设置background-attachment: scroll;

---

以上内容均整理自W3C，如需阅读全文请点击链接。