day20-21浅谈CSS Sprite

最新推荐文章于 2022-05-03 12:29:57 发布

RealRecall

最新推荐文章于 2022-05-03 12:29:57 发布

阅读量75

点赞数

分类专栏：初学前端开发

本文链接：https://blog.csdn.net/realrecall/article/details/110351290

版权

初学前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

什么是css sprite？

将图标、背景、按钮背景等图片合并成一张图，然后通过坐标来定位背景。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
简而言之：一背景图图多用。
具体看这个：https://blog.csdn.net/u011349149/article/details/24181675

可以用sprite实现圆角

但我不想这么做，太麻烦了，用css3新增的属性radius多方便。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
      .roundedBox {
        position: relative;
        padding: 17px;
        margin: 10px 0;
      }
      .corner {
        position: absolute;
        width: 17px;
        height: 17px;
      }
      .topLeft {
        top: 0;
        left: 0;
        background-position: -1px -1px;
      }
      .topRight {
        top: 0;
        right: 0;
        background-position: -19px -1px;
      }
      .bottomLeft {
        bottom: 0;
        left: 0;
        background-position: -1px -19px;
      }
      .bottomRight {
        bottom: 0;
        right: 0;
        background-position: -19px -19px;
      }
      #type1 {
        background-color: #ccdede;
      }
      #type1 .corner {
        background-image: url(../image/corners.gif);
      }
    </style>
  </head>
  <body>
    <div class="roundedBox" id="type1">
      <strong>My content in roundedBox Type 1</strong>
      <div class="corner topLeft"></div>
      <div class="corner topRight"></div>
      <div class="corner bottomLeft"></div>
      <div class="corner bottomRight"></div>
    </div>
  </body>
</html>

#是id选择器的前缀，很久没用过。
悄悄说一句：上面这种方法，就是在拼圆角，好麻烦，用css3新增的属性radius多方便。

CSS Sprites:实用技术还是生厌之物？

其作为一个CSS解决方法被讨论早在2003年7月，提出者Petr Stanícek。（17年前的技术哦）
可以尽量减少HTTP请求

具体：
https://www.zhangxinxu.com/wordpress/2010/03/%E7%BF%BB%E8%AF%91-css-sprites%E5%AE%9E%E7%94%A8%E6%8A%80%E6%9C%AF%E8%BF%98%E6%98%AF%E7%94%9F%E5%8E%8C%E4%B9%8B%E7%89%A9%EF%BC%9F/

这个技术可能已经没必要了。