在“css实现背景色渐变和背景图片共存”一文中,我们介绍了通过 css3 实现一个元素中背景色渐变和背景图片共存的实现方法,其实通过 css3 我们还可以实现更多便捷的背景样式设置,比如本文分享的一个元素使用多张背景图片方法。
示例代码
<!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>