3.css3中多个背景图片的用法

（background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复）

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style type="text/css">
        .class1{
            width: 400px;
            height: 550px;
            border-style: groove;
            border-color: rgba(235,198,118,0.6);
            border-width: 10px;
            padding: 30px;

            background-image: url(../image/img2.jpg),url(../image/img3.jpg),url(../image/img4.jpg);
            background-repeat: no-repeat,no-repeat,repeat;/*背景图片不重复*/
            background-position: top left,bottom right,top center;/*右下背景图片的位置*/
            background-origin: border-box,padding-box,content-box;/*左上背景图片的定位*/
            background-clip: border-box,padding-box,content-box; /*中间背景图片裁剪*/

        }
        p{
            font-size: 20px;
            text-indent: 2em;/*首行缩进2个字符*/
            line-height: 28px;
            padding-top: 12px;
        }
    </style>
</head>
<body>
    <div class="class1">
        <p>大家好。这是一个css3添加背景图片的小案例。需要注意的是：1.在添加多个背景的时候，底层的背景图要放在最后面。2，多个背景之间的属性用逗号分割。</p>
    </div>
</body>
</html>

 

posted @ 2019-10-15 16:54  cjl2019  阅读(648)  评论(0)  编辑  收藏  举报