H5学习之背景图片、图片精灵、多重背景、背景图片位置

BG7ZAG

2017-4-18 0:26

1,773

程序开发

23 字

几秒读完

背景图片：

<html>
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        body{
            /*
            流式布局
            从左到右 从上到下
            */
            height: 100%;
            /*因为标签总是会尽最大努力占据最小高度
              所以当body中内容时 高度为0 故将高度设置为100%*/
            background-image: url(lry.jpg);
            margin: 0;
            /*因为body标签默认带有8px的外间距
              所以设置高度为100%时 则会出现滚动条
              所以将margin设为0去除滚动条*/
              background-repeat: no-repeat;
              /*背景图片小于标签尺寸时 背景图片会在两个放向上重复自己 
                直到填满整个空间 除非设置了background-repeat
                还可在一个方向上重复
                background-repeat: repeat-x
                background-repeat: repear-y*/
              background-color: red;
              /*背景图片小于标签时，且背景图片不重复时 
                可以看到背景图片和颜色共存的 背景图片在背景颜色的上方*/
                
              background-position: 50% 50%;
              /*background-position样式可以决定从哪个位置开始绘制这张图片*/
              /*如果使用百分比 计算方式（容器的宽 - 图片的宽）× 百分比 超出部分隐藏
                                    （容器的高 - 图片的高）× 百分比 超出部分隐藏
                如果仅规定了一个值 那另一个值为50% */
              
              background-size: contain;
              /*设置图片大小
                如果只设置一个值（宽） 那另一个值为auto
                如果使用百分比 计算方式为（图片的宽和高 × 百分比）*/
        }
    </style>
<body>
    
</body>
</html>

图片精灵：

<html>
<head>
    <meta charset="UTF-8">
    <title>图片精灵</title>
    <style>
        /*body{
            background-color: black;
        }*/
        /*方案一
        span{
            display 属性规定元素应该生成的框的类型
            display: block;
            width: 144.285px;
            height: 144.285px;
            background-image: url(icons.jpg);
            background-position: -144.285px -144.285px;
            显示第二行第二个图标
        }
        span>i{
            display: none;
            需要可以显示文字 不需要可以将中间文字隐藏
        }*/

        /*方案二
        .icons{
            display: block;
            width: 144.285px;
            height: 144.285px;
            background-image: url(icons.jpg);
        }
        .r1c1{
            background-position: -144.285px -144.285px;
        }
        .ric2{
            background-position: -288.57px -144.285px;
        }*/

        /*方案三*/
        /*可以随便的设置任意大小*/
        /*.icons{
            display: block;
            width: 25px;
            height: 25px;
            background-image: url(icons.jpg);
            background-size: 700% 700%;
        }
        .r1c1{
            background-position: -50px -50px;
        }
        .r1c2{
            background-position: -50px -100px;
        }*/
    </style>
    <!--最终方案-->
    <link rel="stylesheet" href="style.css">    
<body>
    <section>
        <!--<span><i>方案一</i></span>-->
        <span class="icons"></span>
        <span class="icons r1c1"></span>
        <span class="icons r1c2"></span>
        <span class="icons r1c3"></span>
        <span class="icons r1c4"></span>
        <span class="icons r1c5"></span>
        <span class="icons r1c6"></span>

        <span class="icons r2c0"></span>
        <span class="icons r2c1"></span>
        <span class="icons r2c2"></span>
        <span class="icons r2c3"></span>
        <span class="icons r2c4"></span>
        <span class="icons r2c5"></span>
        <span class="icons r2c6"></span>

        <span class="icons r3c0"></span>
        <span class="icons r3c1"></span>
        <span class="icons r3c2"></span>
        <span class="icons r3c3"></span>
        <span class="icons r3c4"></span>
        <span class="icons r3c5"></span>
        <span class="icons r3c6"></span>
        
        <span class="icons r4c0"></span>
        <span class="icons r4c1"></span>
        <span class="icons r4c2"></span>
        <span class="icons r4c3"></span>
        <span class="icons r4c4"></span>
        <span class="icons r4c5"></span>
        <span class="icons r4c6"></span>

        <span class="icons r5c0"></span>
        <span class="icons r5c1"></span>
        <span class="icons r5c2"></span>
        <span class="icons r5c3"></span>
        <span class="icons r5c4"></span>
        <span class="icons r5c5"></span>
        <span class="icons r5c6"></span>

        <span class="icons r6c0"></span>
        <span class="icons r6c1"></span>
        <span class="icons r6c2"></span>
        <span class="icons r6c3"></span>
        <span class="icons r6c4"></span>
        <span class="icons r6c5"></span>
        <span class="icons r6c6"></span>

        <span class="icons r7c0"></span>
        <span class="icons r7c1"></span>
        <span class="icons r7c2"></span>
        <span class="icons r7c3"></span>
        <span class="icons r7c4"></span>
        <span class="icons r7c5"></span>
        <span class="icons r7c6"></span>
    </section>
</body>
</html>

CSS：

body{
    background-color: black;
}
section{
    margin: 50px auto;
    width: 400px;
    position: relative;
}
/*方案一
span{
    display 属性规定元素应该生成的框的类型
    display: block;
    width: 144.285px;
    height: 144.285px;
    background-image: url(icons.jpg);
    background-position: -144.285px -144.285px;
    显示第二行第二个图标
}
span>i{
    display: none;
    需要可以显示文字 不需要可以将中间文字隐藏
}*/

/*方案二
.icons{
    display: block;
    width: 144.285px;
    height: 144.285px;
    background-image: url(icons.jpg);
}
.r1c1{
    background-position: -144.285px -144.285px;
}
.ric2{
    background-position: -288.57px -144.285px;
}*/

/*方案三*/
/*可以随便的设置任意大小*/
.icons{
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(icons.jpg);
    background-size: 700% 700%;
}
.r1c1{
    background-position: 0 -50px;
}
.r1c2{
    background-position: 0 -100px;
}
.r1c3{
    background-position: 0 -150px;
}
.r1c4{
    background-position: 0 -200px;
}
.r1c5{
    background-position: 0 -250px;
}
.r1c6{
    background-position: 0 -300px;
}

.r2c0{
    background-position: -50px 0;
    position: absolute;
    left: 50px;
    top: 0;
}
.r2c1{
    background-position: -50px -50px;
    position: absolute;
    left: 50px;
    top: 50px;
}
.r2c2{
    background-position: -50px -100px;
    position: absolute;
    left: 50px;
    top: 100px;
}
.r2c3{
    background-position: -50px -150px;
    position: absolute;
    left: 50px;
    top: 150px;
}
.r2c4{
    background-position: -50px -200px;
    position: absolute;
    left: 50px;
    top: 200px;
}
.r2c5{
    background-position: -50px -250px;
    position: absolute;
    left: 50px;
    top: 250px;
}
.r2c6{
    background-position: -50px -300px;
    position: absolute;
    left: 50px;
    top: 300px;
}
.r3c0{
    background-position: -100px 0px;
    position: absolute;
    left: 100px;
    top: 0px;
}
.r3c1{
    background-position: -100px -50px;
    position: absolute;
    left: 100px;
    top: 50px;
}
.r3c2{
    background-position: -100px -100px;
    position: absolute;
    left: 100px;
    top: 100px;
}
.r3c3{
    background-position: -100px -150px;
    position: absolute;
    left: 100px;
    top: 150px;
}
.r3c4{
    background-position: -100px -200px;
    position: absolute;
    left: 100px;
    top: 200px;
}
.r3c5{
    background-position: -100px -250px;
    position: absolute;
    left: 100px;
    top: 250px;
}
.r3c6{
    background-position: -100px -300px;
    position: absolute;
    left: 100px;
    top: 300px;
}
.r4c0{
    background-position: -150px 0px;
    position: absolute;
    left: 150px;
    top: 0px;
}
.r4c1{
    background-position: -150px -50px;
    position: absolute;
    left: 150px;
    top: 50px;
}
.r4c2{
    background-position: -150px -100px;
    position: absolute;
    left: 150px;
    top: 100px;
}
.r4c3{
    background-position: -150px -150px;
    position: absolute;
    left: 150px;
    top: 150px;
}
.r4c4{
    background-position: -150px -200px;
    position: absolute;
    left: 150px;
    top: 200px;
}
.r4c5{
    background-position: -150px -250px;
    position: absolute;
    left: 150px;
    top: 250px;
}
.r4c6{
    background-position: -150px -300px;
    position: absolute;
    left: 150px;
    top: 300px;
}
.r5c0{
    background-position: -200px 0px;
    position: absolute;
    left: 200px;
    top: 0px;
}
.r5c1{
    background-position: -200px -50px;
    position: absolute;
    left: 200px;
    top: 50px;
}
.r5c2{
    background-position: -200px -100px;
    position: absolute;
    left: 200px;
    top: 100px;
}
.r5c3{
    background-position: -200px -150px;
    position: absolute;
    left: 200px;
    top: 150px;
}
.r5c4{
    background-position: -200px -200px;
    position: absolute;
    left: 200px;
    top: 200px;
}
.r5c5{
    background-position: -200px -250px;
    position: absolute;
    left: 200px;
    top: 250px;
}
.r5c6{
    background-position: -200px -300px;
    position: absolute;
    left: 200px;
    top: 300px;
}
.r6c0{
    background-position: -250px 0px;
    position: absolute;
    left: 250px;
    top: 0px;
}
.r6c1{
    background-position: -250px -50px;
    position: absolute;
    left: 250px;
    top: 50px;
}
.r6c2{
    background-position: -250px -100px;
    position: absolute;
    left: 250px;
    top: 100px;
}
.r6c3{
    background-position: -250px -150px;
    position: absolute;
    left: 250px;
    top: 150px;
}
.r6c4{
    background-position: -250px -200px;
    position: absolute;
    left: 250px;
    top: 200px;
}
.r6c5{
    background-position: -250px -250px;
    position: absolute;
    left: 250px;
    top: 250px;
}
.r6c6{
    background-position: -250px -300px;
    position: absolute;
    left: 250px;
    top: 300px;
}
.r7c0{
    background-position: -300px 0px;
    position: absolute;
    left: 300px;
    top: 0px;
}
.r7c1{
    background-position: -300px -50px;
    position: absolute;
    left: 300px;
    top: 50px;
}
.r7c2{
    background-position: -300px -100px;
    position: absolute;
    left: 300px;
    top: 100px;
}
.r7c3{
    background-position: -300px -150px;
    position: absolute;
    left: 300px;
    top: 150px;
}
.r7c4{
    background-position: -300px -200px;
    position: absolute;
    left: 300px;
    top: 200px;
}
.r7c5{
    background-position: -300px -250px;
    position: absolute;
    left: 300px;
    top: 250px;
}
.r7c6{
    background-position: -300px -300px;
    position: absolute;
    left: 300px;
    top: 300px;
}

多重背景：

<html>
<head>
    <meta charset="UTF-8">
    <title>多重背景</title>
    <style>
        section{
            margin: 50px;
            height: 500px;
            /*background-image: url(lry.jpg);
            background-repeat: no-repeat;
            background-color: red;
            background-size: 95%;*/
            background-image: url(lry.jpg), url(icons.jpg);
            background-repeat: no-repeat;
            background-position: 50%;

            /*blend 混合 mode 模式 混合模式*/
            background-blend-mode: multiply;
        }
    </style>
<body>
    <section></section>
</body>
</html>

背景图片位置：

<html>
<head>
    <meta charset="UTF-8">
    <title>背景图片位置</title>
    <style>
        p{
            margin: 30px;
            border: 20px dotted blue;
            padding: 50px;
            background-image: url(icons.jpg);
            background-repeat: no-repeat;
            /*默认情况下背景图片从边框左上角内部开始到右下角边框线外部*/
            /*background-origin: border-box;*/
            /*背景图片起始位置调整到边框线左上角 即边框盒子左上角*/
            background-origin: content-box;
            /*将背景图片起点位置调整到内容区左上角 即内容盒子左上角*/
            /*background-position: -80px -80px;*/

            background-clip: content-box;
            /*将图片截止位置
              content-box 背景被裁剪到内容框
              border-box 背景被裁剪到边框盒
              padding-box 背景被裁剪到内边距框
            */
        }
    </style>
<body>
    <p>
        这是一段落这是一段落这是一段落这是一段落这是一段落<br>
        这是一段落这是一段落这是一段落这是一段落这是一段落<br>
        这是一段落这是一段落这是一段落这是一段落这是一段落<br>
        这是一段落这是一段落这是一段落这是一段落这是一段落<br>
    </p>
</body>
</html>