CSS-精灵图片的使用(从一张图片中截图指定位置图标)

CSS-精灵图片的使用(从一张图片中截图指定位置图标)目录一、名词解释二、使用难点三、使用步骤四、程序源码一、名词解释  在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次请求–>响应–>下载,这样一来将会消耗大量的时间来下载这些小图标  所…

大家好,又见面了,我是你们的朋友全栈君。

目录

一、名词解释

二、使用难点

三、使用步骤

四、程序源码


一、名词解释

    在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次请求–>响应–>下载,这样一来将会消耗大量的时间来下载这些小图标

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

    所以为了提高网页响应速度,避免这个小图标加载耗费大量时间,于是将这些小图片全部放到一张图片上,例如下面的图是利用浏览器调试工具(通常为F12打开)从微博的请求中找到的,大家可以直接下载使用

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

二、使用难点

    精灵图片的使用难点在于如何在这一张图片中定位到我们需要的部分,首先我们需要理解三个坐标:浏览器坐标、组件坐标、图片坐标,每个组件都有自己的坐标点,左上角为原点,往上y值为负数,越来越小;往左x为负数,越来越小

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

    假如我们的组件的宽高分别为16px,图片宽高为200px,我们发现如果将图片作为组件的背景图片,将会从图片0,0左边点开始显示,只能显示图片的16px,因为组件只有这么大,多余的图片就被舍弃了。如下图片当图片原点和组件原点重叠的时候,组件只能显示图片的16px大小

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

     假如此时我们想要截取图片中第二列中的亮的vip6,此时图片需要分别往左移动和往上移动一定距离如下。原来图片的坐标和组件的坐标重叠都是0,0,此时图片往上移动,相当于y减小了100px(假设值),此时y坐标为-100px;往左移动24px,此时x坐标为-24px,所以如果我们需要获取vip6图标,图片相对于组件坐标往左移动24px和往上移动100px就能取到

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

三、使用步骤

   1.我们需要用到CSS中两个与背景图片有关的属性

  • background-image: url(“图片地址”);

  • background-position: x坐标 y坐标;

    2.现在我们以取vip3和4以及微博认证为例

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

   3.创建三个div,宽高分别等于vip3和4以及微博认证大小,如vip3和4宽高都为16px,微博认证x及y坐标分别为95px 35px

  • 创建三个div

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

  • 指定宽高、背景图片、图标所在位置

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

  •   显示效果

CSS-精灵图片的使用(从一张图片中截图指定位置图标)

四、程序源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        div{
            width: 16px;
            height:  16px;
            background-image: url("images/icon.png");
        }
        /* 从精灵图片中获取需要的图片 */
        .vip3{              /* 获取vip3 */
            background-position: -24px -48px;
        }
        .vip4{              /* 获取vip4 */
            background-position: -24px -72px;
        }
        .auth{              /* 获取微博认证 */
            width: 95px;    /* 微博认证和vip大小不一样,需单独指定 */
            height: 35px;
            background-position: -425px -50px; 
        }
    </style>
</head>
<body>
    <!-- 设置三个div显示 -->
    <div class="vip3"></div>
    <div class="vip4"></div>
    <div class="auth"></div>
</body>
</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137487.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 解决动态生成的SQL中特殊字符的问题 QuotedStr function「建议收藏」

    解决动态生成的SQL中特殊字符的问题 QuotedStr function「建议收藏」Returnsthequotedversionofastring.UnitSysUtilsCategoryStringhandlingroutinesDelphisyntax:functionQuotedStr(constS:string):string;DescriptionUseQuotedStrtoco…

    2022年10月10日
  • pytest parametrize fixture_reno参数

    pytest parametrize fixture_reno参数前言当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化。官方示

  • pycharm导入库变灰色_import python

    pycharm导入库变灰色_import pythonpycharm中import导入包呈现灰色问题之解决!问题描述:pycharm中单个py文件导入包时呈灰色,而别的文件却能正常显示,我按照CSDN博客上给的设置①右键点击项目,找下面的MarkDirectoryas选择SourceRoot”以及②点击File-InvalidteCaches/Restart…重启两种方法均不起作用,无法解决问题。我的解决方法:将鼠标移动到那行…

  • 详解stacking过程

    翻到之前自己写的这篇博客,感觉写的还是不够简洁明了,特地回来改一下,顺便文末附上Kaggle内相关操作的代码,希望能够帮助学习的同学能够瞬间理解stacking这个概念。stacking:stacking是一种分层模型集成框架。以两层为例,第一层由多个基学习器组成,其输入为原始训练集,第二层的模型则是以第一层基学习器的输出作为特征加入训练集进行再训练,从而得到完整的stacking模型。sta…

  • 服务器端黑盒测试工具JMeter[通俗易懂]

    服务器端黑盒测试工具JMeter[通俗易懂]简介JMeter是针对服务器的黑盒测试工具。可以用于功能测试,负载测试和性能测试。JMeter是ApacheJakarta的子项目,开源免费软件。JMeter的网址:jakarta.apache.org/jmeter/当前版本:2.3安装和使用需要安装JRE。解压缩JMeter的分发包。在bin目录下,运行jmeter.bat。在JMeter窗口中定义测试…

  • LoadRunner详细使用教程

    LoadRunner详细使用教程文章目录VirturalUserGeneratorControllerAnalysisloadrunner的使用VirturalUserGenerator:录制脚本Controller:场景测试,收集并发测试的数据(多个用户并发场景)Analysis:分析系统并发测试的数据,生成报告和图标loadrunner做性能测试的原理?性能测试主要是多用户的并发,就是多线程模拟用户的操作,什么是集合点,为什莫需要集合点?因为先初始化好的线程需要等待后面还没初始化好的线程,所以设置一个集合点

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号