zoukankan      html  css  js  c++  java
  • backgroud 应用减小资源大小和请求数

    一,一个典型的应用,利用小图的自动延伸,实现整个网页背景图,充分节约资源宽带。如:汽车之家的404页背景图就是这样

    <div style="height: 3000px; background-repeat: no-repeat;background-image: url(1.jpg);"></div>
    <div style="height: 3000px; background-repeat: repeat-x;background-image: url(1.jpg);"></div>
    <div style="height: 3000px; background-repeat: repeat-y;background-image: url(1.jpg);"></div>
    背景可以是颜色,静态 动态图片

    二,另一个经典应用,将网站上用到的大量小logo图片,集成在一张大图上,通过ground-position-x 或y 来显示。这样可以节省网站的请求数。
      简写模式:
        background-position: 10px 0; = ground-position-x: 10px;ground-position-y: 0;
        background: url(1.jpg) 0 0 no-repeat; 等于以下组合
          background-image: url(1.jpg);background-position-x: 0;background-position-y: 0;background-repeat: no-repeat;

    <div style="background: url(1.jpg) 0 0 no-repeat;height: 1000px;"></div>
    

      减少请求数:

    <div style="background: url(bg.png) 0 0 no-repeat; height: 20px; 20px;"></div>
    <div style="background: url(bg.png) 0 -20px no-repeat; height: 20px; 20px;"></div>
    <div style="background: url(bg.png) 0 -40px no-repeat; height: 20px; 20px;"></div>
    <div style="background: url(bg.png) 0 -60px no-repeat; height: 20px; 20px;"></div>
    

      这样一张图实现了四个图标,一个请求数,就可以实现多个不同的资源的效果

     


  • 相关阅读:
    算法图解-散列表
    算法图解-笔记
    ERROR:cannot read property 'getAttribute' of null 报错处理
    Error: Cannot find module 'node-sass' 报错处理
    一、Spring Cloud概述
    十、ActiveMQ多节点集群
    九、ActiveMQ的消息存储和持久化
    八、ActiveMQ的传输协议
    七、SpringBoot整合ActiveMQ
    六、Spring整合ActiveMQ
  • 原文地址:https://www.cnblogs.com/alex-hrg/p/9376978.html
Copyright © 2011-2022 走看看