参考手册
CSS 背景
CSS 背景重复
返回 CSS 背景

CSS 背景图像

CSS 背景图像

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-image: url("/images/demo.png");
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Hello World!</h1>
  14. <p>此页面以图像为背景！</p>
  16. </body>
  17. </html>
运行一下
实例

本例展示了文本和背景图像的错误组合。文字难以阅读：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-image: url("/images/demo.png");
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Hello World!</h1>
  14. <p>在此背景图片上阅读这段文本并不容易。</p>
  16. </body>
  17. </html>
运行一下

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

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.   background-image: url("/images/demo.png");
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Hello World!</h1>
  14. <p>本段以一幅图像作为背景！</p>
  16. </body>
  17. </html>
运行一下
CSS 背景重复

分类导航