背景 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                height: 2000px;
            }
            
            .d1 {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                margin: 50px auto 0;
                background-color: yellow;
                background-image: url(2.jpg);
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-attachment: fixed;
            }
        </style>
    </head>

    <body>
        <!--
            背景有关的样式
            1.背景图片  background-image  默认原图大小，铺满整个屏幕
            2.背景颜色  background-color
            3.背景图片的平铺方式 background-repeat                     
                　　 3.1 repeat-x   水平方向平铺
                    3.2 repeat-y   垂直方向平铺
               　　　3.3 no-repeat  只铺一张
　　　　　　　　　　　　3.4 repeat  默认值，铺满（水平，竖直都平铺）
            4.背景图片的位置 background-position
            写法一：填写px数值  第一个值表示x方向偏移，第二个值表示y方向偏移
            写法二：填写方位单词
            x方向：left center right
            y方向：top center bottom
            写法三：填写百分比
            x方向：(容器的宽-图片的宽)*百分比
            y方向：(容器的高-图片的高)*百分比
            5.背景图片是否跟随网页滚动 background-attachment
            5.1 fixed 不滚动
            5.2 scroll 跟随网页滚动 默认值
            6.背景图片的大小 background-size
            写法一：使用px数值
             第一个值：背景图的宽
             第二个值：背景图的高
             写法二：使用百分比
             第一个值：容器的宽*x方向百分比
             第二个值：容器的高*y方向百分比
             写法三：cover
             
             cover和contain在设置背景尺寸的时候，都严格保证图片按比例缩放。
             contain会在铺满宽和高两者中较小的那个方向后停止图片缩放，但是可能导致背景无法被铺满
             cover会在铺满宽和高两者中较小大的那个方向后停止图片缩放，该值一定会铺满容器，但是可能导致背景图片无法展示完整。
             
             背景样式的合写语法：
             background:以上6个值，书写顺序没有要求，但是如果既设置position，又设置size，两者写在一起，中间用/分隔，系统会永远把第一对认为position，第二对认为成size.
        -->
        <div class="d1"></div>
    </body>

</html>

 

posted @ 2021-01-21 17:28  明坤  阅读(105)  评论(0)    收藏  举报