• DIV+CSS背景一张整图(css sprites)


      以前看到很多大型网站,整个网站的背景图片,是同一张图片,下载他的背景图片,看到一张图片上有很多小图标。

      也就是国外很流行的css sprites,目前国内也有很多网站这样用。

      这次在写CSS+DIV时,也这样写了个整站,感觉虽然做网站的整站慢,但在网站的占用资源上,的确省了不少。

      原理,一般网站的图片都是分开的,每个图片的调用都会占用一个IIS链接,而现在把所有图片放在一张图上时,所有图片都是一个图片,只要调用一次图片,就可以提供整个网页的图片用,这样只占一个IIS链接。

      在制作过程用,就是把所有的图片,都用背景来实现,比如一个小图标,就用<b class="exp"></b>这显示,把exp的样式设置一个背景,背景就是一个图片。

    如:

     .exp

    {

    background-image: url(bg.gif);/*背景图片*/

    background-repeat: no-repeat;/*不平铺*/

    background-position: -300px -50px;/*设置背景图片在整个图的位置,在前面加个负号*/

    width=25px;/*宽度*/

    height=25px;/*高度*/

    }

      看到上面的吧,在设置背景时,会指定背景在图片上的位置,然后控制宽度和高度的大小,这样就显示了一个图标了,同样的方法,把网站所有的界面图片都以这样的方法显示,每个图上都是取大图中的一小部分。

      每个小图标在大图片中的位置,可以在PS里用线查看。

  • 相关阅读:
    SpringBoot 整合Shiro
    Shiro 学习
    SpringBoot 整合security、thymeleaf
    【SpringBoot__Mybatis】整合MyBatis 配置文件版2
    SpringBoot 配置Druid数据源及监控
    lombok 使用
    thymeleaf 常用
    随机模块
    md5加密
    python正则
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/2381466.html
Copyright © 2020-2023  润新知