zoukankan      html  css  js  c++  java
  • css雪碧技术的用法。

    ---恢复内容开始---

      在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术。

    雪碧技术是雪碧团队开发,也有人叫它css精灵,是一种css图像合并技术,该方法的原理是将小图片和背景图片合并到一张图片上,然后利用css的背景定位爱显示需要显示的图片部分。

    1.css雪碧的优点:减少加载页面图片时对服务器的请求次数提高页面的加载速度减少鼠标滑过的一些bug。

    2.不足点:css雪碧技术的最大问题是内存使用 。它影响浏览器的缩放功能   拼图维护的时候比较麻烦使css的编写变得更加困难,css雪碧调用的图片不能被打印。

    现在使用 代码来更详细的介绍雪碧技术。

    <div>
        <div></div>
    </div>

    这是简单的html的页面,在外层div就是我们的背景板,它里边的div就是要显示的图片大小,把背景图插入到最小的div里边  并调试背景图的位置,如下代码:

    先给小div来个id  id="xiao".

    #xiao{
        width:50px;
        height:50px;
        background: url("图片路径")no-repeat;
        background-position: 0 0 0 0;
    }

      当图片出现在我们的小div里的时候  就停止调试。

    背景图片可以反复使用  效果杠杠滴。

    ---恢复内容结束---

  • 相关阅读:
    python
    HTTP和HTTPS协议,详解
    常用加密算法之非对称加密算法
    Docker容器数据卷-Volume详解
    使用nsenter进入docker容器后端报错 mesg: ttyname failed: No such file or directory
    Docker 查看容器 IP 地址
    Docker容器数据卷volumes-from
    Docker 进入容器的4种方法
    Jmeter之Bean shell使用(二)
    Jmeter之Bean shell使用(一)
  • 原文地址:https://www.cnblogs.com/Rzyy/p/7002104.html
Copyright © 2011-2022 走看看