CSS 属性

CSS 的background-image 属性在一个元素上设置一个或多个背景图像。

多层背景图像可以堆叠在一起。边框绘制在背景颜色之上。如果无法绘制或加载图像，浏览器会将其视为无图像。

为了指定多个背景图像，您可以提供多个值，以逗号分隔。

属性值

  • none:指定不将图像设置为背景。

  • <image>:要显示的图像的URL。对于多个背景，请传递以逗号分隔的 URL。

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroundImage = "Any value as defined above";

CSS background-image: url()

这里是一个示例，展示如何使用 url() 设置背景图像 -

<html>
<head>
<style>  
   .background-img {
      background-image: url('/css/images/pink-flower.jpg');
      background-repeat: no-repeat;
      width: 400px;
      height: 400px;
      position: relative;
      border: 5px solid black;
      color: white;
   }
</style>
</head>
<body>
   <div class="background-img">Image</div>
</body>
</html>

CSS background-image: 多个图像

这里是一个示例，展示如何将多个图像设置为背景，相互堆叠 -

<html>
<head>
<style>  
   .multiple-images {
      background-image: url('/css/images/logo.png'), url('/css/images/scenery2.jpg'), url('/css/images/white-flower.jpg');
      background-repeat: no-repeat;
      width: 800px;
      height: 700px;
      position: relative;
      border: 5px solid black;
      color: white;
   }
</style>
</head>
<body>
   <div class="multiple-images"></div>
</body>
</html>

CSS background-image: Linear-gradient()

以下示例展示了如何使用图像和线性渐变设置背景:

<html>
<head>
<style>  
   .linear-gradient {
      background-image: linear-gradient(rgba(120, 235, 112, 0.5), rgba(232, 111, 64, 0.5)), url('/css/images/tutimg.png');
      background-repeat: no-repeat;
      background-position: center;
      width: 400px;
      height: 400px;
      position: relative;
      border: 5px solid black;
   }
</style>
</head>
<body>
      <div class="linear-gradient">Background image with linear gradient</div>
</body>
</html>