在“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>
(adsbygoogle = window.adsbygoogle || []).push({});