背景复合写法

Sokachlh

已于 2022-07-28 20:35:10 修改

阅读量92

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2022-07-24 08:58:45 首次发布

本文链接：https://blog.csdn.net/weixin_46031207/article/details/125955763

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*复合写法
    1.用空格隔开
    2.顺序可以换
    3.可以只取一个值，放在后面覆盖前面的值
    */

        * {
            margin: 0;
            padding: 0;
        }

        div {

            width: 1200px;
            height: 800px;
            /* background-color: aqua;
            background-image: url(../001.jpg);
            background-repeat: no-repeat;
            background-position: center; */
            background: yellow url(../001.jpg) no-repeat center fixed;
        }

        .box2 {
            width: 1500px;
            height: 700px;
            background-color: blue;
            background: url(../001.jpg) no-repeat center top blue;
        }
    </style>

</head>

<body>
    <div> </div>
    <div class="box2"> </div>
</body>

</html>