background-image 属性用于设置元素的背景图像。可以为这个属性指定一个图像的 URL 或者用 linear-gradient() 或 radial-gradient() 等方式创建渐变背景。

以下是一些常见的用法:

1. 使用图像的 URL:
    background-image: url('example.jpg');

2. 使用线性渐变背景:
    background-image: linear-gradient(to right, #3498db, #2c3e50);

    上述例子中的 linear-gradient(to right, #3498db, #2c3e50) 创建了一个从左到右的颜色渐变背景。

3. 使用径向渐变背景:
    background-image: radial-gradient(circle, #3498db, #2c3e50);

    上述例子中的 radial-gradient(circle, #3498db, #2c3e50) 创建了一个圆形渐变背景。

4. 使用多个背景图像:
    background-image: url('bg1.jpg'), url('bg2.jpg');

    这里使用逗号分隔的多个 URL,表示元素将显示多个背景图像,按照声明的顺序从上到下堆叠。

和其他背景属性一起使用,可以为元素创建丰富多彩的背景效果。例如:
.element {
  background-image: url('background.jpg');
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

在这个例子中,元素有一个背景图像为 background.jpg,同时设置了白色的背景颜色、内边距、浅灰色的边框和圆角边框。


转载请注明出处:http://www.zyzy.cn/article/detail/5995/CSS