zoukankan      html  css  js  c++  java
  • CSS背景属性

    1、 background-color     背景颜色

    2、 background-image    背景图片

    3、 Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺

    4 、Background-position  left  |  right  |  center  |  top  | bottom  背景定位

      ★方位值只写一个的时候,另外一个值默认居中

      ★写2个方位值的时候,顺序没有要求。

      ★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。

    5、Background-attachment   背景是否滚动   scroll  |  fixed

    <style type="text/css">
            .box{
                height: 500px;
                background-color: #999;
                background-image: url(2.png);
                background-repeat: no-repeat; 
                background-position: 20px 30px;
                background-attachment: scroll;
            }
        </style>
    </head>
    <body>
        <div class="box">fixed的定位以浏览器出发,scroll以元素div定位</div>
    </body>

    6 、背景属性连写:连写的时候没有顺序要求,url为必写项。

    <style type="text/css">
            .box{
                width: 400px;
                height: 500px;
    /*
                background-color: #999;
                background-image:  url(../2.26/picture.jpg);
                background-repeat: no-repeat;
                background-position: bottom;
                background-attachment: scroll;
    */
                background: url(../2.26/picture.jpg) red no-repeat 30px 40px scroll;
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
  • 相关阅读:
    BZOJ4240: 有趣的家庭菜园
    BZOJ1509: [NOI2003]逃学的小孩
    BZOJ5301: [Cqoi2018]异或序列
    BZOJ4540: [Hnoi2016]序列
    BZOJ4956: [Wf2017]Secret Chamber at Mount Rushmore
    BZOJ2141: 排队
    BZOJ1833: [ZJOI2010]count 数字计数
    HDU2089: 不要62
    BZOJ5178: [Jsoi2011]棒棒糖
    BZOJ3439: Kpm的MC密码
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8606328.html
Copyright © 2011-2022 走看看