zoukankan      html  css  js  c++  java
  • CSS——精灵图与背景图片定位

    精灵图产生背景:

    1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
    2、网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites)

    精灵图的定义:

    1、很多图片融合在一张图上,通过背景定位的方式将图标显示在每个盒子中。

    2、背景定位的方式主要通过控制x和y轴的值。

    精灵图使用技巧:

    1、一般情况:直接一个盒子,里面的背景图片是精灵图,使用时注意x轴和y轴。

    2、特殊情况:盒子中有一个小图标,此时,小图标外套一个标签(i标签或者span),给小图标设置定位后(自动转成行内块)定义宽高,这个宽高就是精灵图中的小图的宽高,然后注意x轴和y轴的值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .box{
                 68px;
                height: 30px;
                background: url("qq.png") -877px -201px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

  • 相关阅读:
    1022 D进制的A+B
    1021 个位数统计
    L1-040 最佳情侣身高差
    Celery--基本使用
    Celery--安装
    Celery--简介
    RabbitMQ--常用命令
    RabbitMQ--RPC实现
    RabbitMQ发布订阅
    RabbitMQ基本使用
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7802508.html
Copyright © 2011-2022 走看看