CSS3 矢量图标及背景精灵

最新推荐文章于 2025-02-17 13:48:15 发布

苦涩2020

最新推荐文章于 2025-02-17 13:48:15 发布

阅读量614

点赞数

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106372536

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

CSS3

20 篇文章

订阅专栏

本文详细介绍了CSS3中的矢量图标，包括矢量图的优势、矢量图标引用的font-class和Symbol方法，并提供了使用步骤。同时，文章还讨论了背景精灵技术，解释了其工作原理和优化网页加载速度的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

矢量图标浅解

矢量图：根据几何特性来绘制图形。它的特点是放大后图像不会是真，和分辨率无关
位图：是由称作像素（图片像素）的单个点组成的，放大后，会变成马赛克

矢量图标引用

矢量图标和字体的用法一样

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：
< link rel=“stylesheet” href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：
< span class=“iconfont icon-xxx”>< /span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../img/font_51zxw/iconfont.css">
    <style type="text/css">
        p{
            width: 300px; height: 52px; line-height: 50px;
            margin: 100px auto; border: 1px solid #000;
        }
        .icon-V{
            color: red; font-size: 30px;
        }
    </style>
</head>
<body>
    <p>
        <span class="iconfont icon-V"></span>
        我要自学网QQ
    </p>
</body>
</html>

Symbol 引用

要控制symbol引用的矢量图标，应该把样式加给外层的svg元素

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：
< script src="./iconfont.js">< /script>
第二步：加入通用 CSS 代码（引入一次就行）：
< style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } < /style>
第三步：挑选相应图标并获取类名，应用于页面：
< svg class=“icon” aria-hidden=“true”> < use xlink:href="#icon-xxx">< /use> < /svg>

背景精灵

背景精灵技术（雪碧图）：就是在一张大图片上集成了很多张小图片上，使用背景定位来显示的图片
背景精灵技术的作用：可以减少向服务器请求的次数，降低服务器的压力，加快浏览器加载
背景精灵使用：背景的图片和背景定位配合使用

百分比背景精灵设置

背景图片横向有多少个，背景图片的宽度就设置成元素宽度的多少倍
背景图片纵向有多少个，背景图片的宽度就设置成元素高度的多少倍
背景图片横向和纵向的个数最好设置成：100/(个数-1)=整数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .bigBox{
            width: 900px; height: 340px; margin: 50px auto;
            background: #ccc;
        }
        .box{
            width: 200px; height: 300px; background-color: red;
            margin: 20px 50px; border-radius: 15px; float: left;
            background:url(../img/puke.png) no-repeat 50% 100%/500% 300%
        }
        #b1{
            background-position: 0 0;
        }
        #b2{
            background-position: 50% 50%;
        }
        #b3{
            background-position: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <div id="b1" class="box"></div>
        <div id="b2" class="box"></div>
        <div id="b3" class="box"></div>
    </div>
    
</body>
</html>