CSS完成小精灵图与字体样式标志

日期:2021-03-01 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

小精灵图:

在之前,每一个照片資源全是单独的1张张照片,访问器浏览网站中的不一样网页页面时是反复获得这1张张照片的,这意味着必须浏览许多次資源。

以便降低資源的浏览次数,将好几个常见的照片结合到1张照片中(网页页面的缓存文件体制是会略去当地早已有的資源,假如前1次获得到了这个資源,那末后边不容易再浏览了,直至缓存文件的資源无效了。【意思有点相近去游乐设备园,一些票能玩全部手机游戏,而一些票只能玩1个手机游戏,假如你拿着能玩全部手机游戏的票,那你就无需不便去1次次买票了】)。

将好几个常见的照片结合到1张照片中以后,把这个图设定成情况照片,随后运用background-position来显示信息照片的不一样一部分。

示例:

下面是1张26字母表,大家运用这张图来拼出1个GOOGLE

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF⑻" />
    <title>Document</title>
    <style>
        div{
            display:inline-block;
        }
        div:first-child{
            width:79px;
            height: 79px;
            background-image:url('abcd.jpg');
            background-position:⑶96px 0;
        }
        div:nth-child(2){
            width:82px;
            height: 82px;
            background-image:url('abcd.jpg');
            background-position:⑶26px ⑼8px;
        }
        div:nth-child(3){
            width:82px;
            height: 82px;
            background-image:url('abcd.jpg');
            background-position:⑶26px ⑼8px;
        }
        div:nth-child(4){
            width:79px;
            height: 79px;
            background-image:url('abcd.jpg');
            background-position:⑶96px 0;
        }
        div:nth-child(5){
            width:48px;
            height: 77px;
            background-image:url('abcd.jpg');
            background-position:⑻1px ⑴01px;
        }
        div:nth-child(6){
            width:48px;
            height: 77px;
            background-image:url('abcd.jpg');
            background-position:⑵86px 0;
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

結果:

如上例所示,大家能够把多张照片放到1张大图中,随后运用background-position便可以截取下大家要想看到的內容.

在实际中许多的情况照片都应用了这类技术性.

例如京东LOGO:

京东的1些小标志:

字体样式标志:

大家都知道,企业字体样式的文档尺寸小于照片的尺寸,考虑到小精灵图解决的是1张张照片,有人就有了1个奇思妙想--把照片变换成字体样式(具体上字体样式原本便是那末设计方案下来的。)

变换成字体样式后,可使用独特的编码来显示信息出特定的照片。

字体样式标志比小精灵图有1个十分显著的益处,由于他是字体样式,因此它可以更改字体样式色调,能更改字体样式尺寸(而且不容易失真)。

事例:【下面仅演试应用,不演试怎样制做字体样式标志】

我运用icomoon制做了1套字体样式标志,【icomoon有现成的标志挑选】,并免费下载下来。下面是文档名。

style.css能出示1种应用字体样式标志的方法

demo.html能出示第2种应用字体样式标志的方法。

随后应用:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF⑻" />
    <title>Document</title>
    <style >
    /* 申明字体样式  这下面1堆文本在免费下载的文档夹中的css文档中*/
        @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?ni3k5c');
      src:  url('fonts/icomoon.eot?ni3k5c#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?ni3k5c') format('truetype'),
        url('fonts/icomoon.woff?ni3k5c') format('woff'),
        url('fonts/icomoon.svg?ni3k5c#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
        }
        /* 应用 */
        [class^="icon-"], [class*=" icon-"] {
          /* use !important to prevent issues with browser extensions that change fonts */
          font-family: 'icomoon' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon-home:before {
          content: "\e900";
        }
        .icon-image:before {
          content: "\e90d";
        }
        .icon-music:before {
          content: "\e911";
        }
        div{
            font-family:'icomoon';/* 要与上面1致 */
        }
    </style>
</head>
<body>
    <div class=".icon-imagee"></div> 
    <!-- 第1种应用方法:
    导入style.css文档,并应用特定标志的类挑选器的特性做为对应的class特性值
     -->
    <div></div> <!-- 第2种应用方法:
    对标识开展字体样式申明,随后开启demo.html拷贝那个标志下来【左侧1个编码,右侧1个标志】
     -->
     <!-- 第1种方式是应用::before来提升,大家还可以应用其他::before方法来加上 -->
</body>
</html>

总结

以上所述是网编给大伙儿详细介绍的CSS完成小精灵图与字体样式标志,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:css完成带箭头和圆点的轮播 返回下一篇:没有了