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>
设置元素的背景图像