CSS属性（背景属性）

た入场券 2021-12-24 01:37 389阅读 0赞

1.背景属性

![1468469-20190106144542211-773634552.png][]

![1468469-20190106151658909-1660361908.png][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>05背景相关属性示例</title>
        <style>
            /* 背景颜色 */
            .c0 {
         
                background-color: red;
            }
            /* 背景图片 */
            /*.c1 {
         */
                /*width: 600px;*/
                /*height: 600px;*/
                /*border: 1px solid black; !* 边框，1像素，颜色是黑色 *!*/
                /*background-image: url("huluwa.png");*/
                /*background-repeat: no-repeat;   !* 背景图片不平铺 *!*/
                /*!*background-position: center;    !* 背景图片在中间区域，也可用50% 50% *!*!*/
                /*!*background-position: 50% 50%;*!*/
                /*background-position: 200px 200px;  !* 向x轴和y轴各偏移200像素*!*/
            /*}*/
    
            /* 简写上面的.c1 */
            .c1 {
         
                width: 600px;
                height: 600px;
                border: 1px solid black; /* 边框，1像素，颜色是黑色 */
                background: url("huluwa.png") no-repeat 50% 50%; /* 简写成一条 */
            }
        </style>
    </head>
    <body>
    
    <div class="c0">我是div</div>
    
    <div class="c1"></div>
    
    </body>
    </html>

![1468469-20190106151722516-1435304882.png][]

（1）一个鼠标滚动背景图不动的例子

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>06背景不动效果示例</title>
        <style>
    
            .c1 {
         
                height: 500px;
                background-color: red;
            }
    
            .c2 {
         
                height: 500px;
                background: url("huluwa.png") no-repeat center;
                background-attachment: fixed;   /* 将背景图片固定住，这样在鼠标上限滚动时，这个图片固定住 */
            }
    
            .c3 {
         
                height: 500px;
                background-color: green;
            }
    
        </style>
    </head>
    <body>
    
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    
    </body>
    </html>

转载于:https://www.cnblogs.com/whylinux/p/10229049.html

[1468469-20190106144542211-773634552.png]: /images/20211223/01fac42ac3464204abbe03c58ae985ff.png
[1468469-20190106151658909-1660361908.png]: /images/20211223/046c1d3814d04a9e94b152b023fb70a4.png
[1468469-20190106151722516-1435304882.png]: /images/20211223/469bf6229d424309aa7f874522afdd2d.png