CSS 背景图片


目录

    显示目录


CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下,图像会重复,以便覆盖整个元素。

例子

设置页面的背景图片:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>


例子

此示例显示了文本和背景图像的错误组合。文字是 很难读:

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>


注意:使用背景图像时,请使用不会干扰文本的图像。

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>



CSS 背景图像属性

background-image

设置元素的背景图像