14，背景属性

<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        .test1{
            width: 300px;
            height: 300px;
            background-color: indianred;
            background-size: 200px,200px;
        }
        .test2{
           background-color: teal;

        }
        .test3{
            width: 300px;
            height: 300px;
        }
        .test4{
            width: 300px;
            height: 200px;
        }
        .bg-img1{
            background-image:url("../images/123.jpeg");
        }
        .repeat1{
            background-repeat: no-repeat;
        }
        .position1{
            background-position: center;
        }
        .position2{
            background-position: top left;
        }
        .position3{
            background-position-x: 1px;
            background-position-y: 1px;
        }
        .bg-size1{
            background-size: contain;
        }
        .bg-size2{
            background-size: cover;
        }
    </style>
    <link rel="stylesheet" href="../css/背景属性.css">
</head>
<body>
4.背景属性:
1) "><div class="test1"></div>
        <hr>
        <div class="bg-img1 test3"></div>
        <hr>
        <div class="test3 bg-img2 repeat1 test2 position1"></div>
        <hr>
        <div class="test3 bg-img2 repeat1 test2 position2"></div>
        <hr>
        <div class="test3 bg-img2 repeat1 test2 position3"></div>
        <hr>
        <div class="test3 bg-img2 repeat1 test2 bg-size1"></div>
        <hr>
        <div class="test4 bg-img2 repeat1 test2 bg-size1"></div>
        <hr>
        <div class="test4 bg-img2 repeat1 test2 bg-size2"></div>



</body>
posted on 2022-04-07 11:33 小小程序猿level1 阅读(22) 评论(0) 收藏举报