css3实现一个div设置多张背景图片

作者：Miao 阅读：4636次

css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置直接多个背景图片。不会像以前还要写多个div来放多个背景图片。

实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3实现一个div设置多张背景图片</title>
		<style type="text/css">
			div {
				width: 300px;
				height: 200px;
				border: 1px solid #ddd;
				background: url("miao.jpg") top left no-repeat, url("miao.jpg") top right no-repeat, url("miao.jpg") bottom center no-repeat;
				background-size: 100px 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果

另外，大家要注意浏览器的兼容性哟。

IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。
IE9不支持CSS3新增参数值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作为背景图像。
Opera11.50-11.51不支持CSS3新增参数值：< radial-gradient > |< repeating-radial-gradient >作为背景图像。

赞一个 (306)