CSS - background-image 属性_CSS 菜鸟教程

CSS 的 background-image 属性允许为元素设置一个或多个背景图像。可以指定图像 url 并将其与背景的其他属性相结合，以使其具有视觉吸引力。

语法


background-image: url('url') | none | initial | inherit;

属性值

值	描述
url	指定所需图像的 URL。对于多个图像，必须提供逗号分隔的 URL。
nope	T指定了必须不显示任何图像。默认值。
linear-gradient()	设置从顶部到底部至少定义 2 种颜色的线性渐变背景图像。
radial-gradient()	设置从中心到边缘至少 2 种颜色定义的径向渐变背景图像。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS 背景图像属性示例

下面描述了使用不同值的 background-image 属性的一些示例。

将图像设置为背景

可以通过指定所需图像的 url 来设置图像的背景。在以下示例中，使用了花卉图像的 url。


	 	<!DOCTYPE html>
	 	<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>
	 	 	 	<h2>CSS background-image property</h2>
	 	 	 	<div class="background-img">Image</div>
	 	</body>
	 	
	 	</html>

多张图片作为背景

如果要使用多个图像，则将在 url（）中指定图像的 url，并使用逗号分隔的值。在以下示例中，使用了两个不同的图像，它们相互堆叠。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .multiple-images {
	 	 	 	 	 	 background-image: url('/css/images/logo.png'),
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 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>
	 	 <h2>CSS background-image property</h2>
	 	 <div class="multiple-images"></div>
</body>

</html>

背景中的颜色转换

也可以使用线性渐变来设置图像的背景。颜色过渡在指定方向的直线上发生。以下示例对此进行了演示。

在这里，我们定义了渐变“底部”的方向，然后定义了开始和结束颜色“黄色”和“绿色”。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .linear-gradient {
	 	 	 	 	 	 background-image: linear-gradient(to bottom, yellow, green);
	 	 	 	 	 	 background-repeat: no-repeat;
	 	 	 	 	 	 background-position: center;
	 	 	 	 	 	 width: 400px;
	 	 	 	 	 	 height: 400px;
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 border: 5px solid black;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background image property</h2>
	 	 <div class="linear-gradient">
	 	 	 Background image with linear gradient</div>
</body>

</html>

支持的浏览器

属性
background-image	1.0	4.0	1.0	1.0	3.0

<< CSS - background-color 属性 CSS - background-origin 属性 >>