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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM