以下是一些常见的用法:
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