1.6 常见样式：单位值种类，颜色值模式，背景图片，平铺，背景定位

最新推荐文章于 2024-12-04 20:49:34 发布

Lemon Love

最新推荐文章于 2024-12-04 20:49:34 发布

阅读量157

点赞数

本文链接：https://blog.youkuaiyun.com/qq_18873031/article/details/105327808

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 600px;
            height: 400px;
            background-color: #ccc;
            background-image: url(img/1.jpg);/*默认状态下是平铺的*/
            background-repeat: repeat-y;
            background-position: 0px 20px;


            /*
            background复合样式：background:red url("img/1.jpg") no-repeat center top;
                不分属性书写顺序
            */

            /*
            内容会撑开容器宽高的
            背景不会占用容器宽高
            */

            /*
            background-repeat: no-repeat;
                no-repeat 不重复
                repeat-x 水平平铺
                repeat-y 垂直平铺
                repeat 重复
            */

            /*
            background-position: 100px 30px;
                背景定位：x，y
                        100px 30px
                        10%   20%
                        left | center | right     top | center | bottom
            */

            /*
            background-attachment:背景图是否滚动
                fixed:固定在浏览器可视区域（不滚动）
                scroll：跟随滚动条滚动
            */
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>