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)


相关推荐

  • C语言 对数组名取地址

    C语言 对数组名取地址

  • Android Studio Button背景颜色无法修改「建议收藏」

    Android Studio Button背景颜色无法修改「建议收藏」关于AndroidStudioButton背景无法修改,一直呈现亮紫色作为安卓初学者,发现Button的背景颜色无法修改,也没法链接到drawable的样式xml文件,前前后后折腾了好久,查阅了CSDN发现是新版本主题文件的问题,将方法分享给有需要的人原因:由于新版本的主题问题导致解决方法:将app/res/values目录下的themes”<stylename=…”一句代码改成如下内容重启Androidstudio即可<stylename=”Theme.Androi

  • 3D视频编码(3d打印技术介绍)

    3D-HEVC编码框架3D-HEVC编码结构是对HEVC的扩展,每个视点纹理及深度图编码主要采用HEVC编码框架,但在其基础上增加了一些新的编码技术,使其更有利于深度图和多视点的编码。图13D-HEVC编码结构如上图所示,3D-HEVC编解码结构和MVC类似。图中所有输入的视频图像和深度图像是同一时刻,不同拍摄位置的场景,这些图像组成一个存取层。在同一个存取层中,首先对独立视点(基准视点…

  • vmware虚拟机连不上网解决方案

    vmware虚拟机连不上网解决方案本帖来源于“百度经验”,为了方便在这里记录一下步骤1,首先,打开已经安装好的VMware,在菜单栏找到“编辑”,在弹出的下拉功能菜单中,选择“虚拟网络编辑器”。如图:2,接着,等待软件打开虚拟网络编辑器设置界面。如图:3,接着,在打开的网路编辑器界面中,选择“还原默认设置”。如图:4,接着,在弹出的提示信息框,选择“是”。如图:5,接着,等待软件自动还原网络设置重新安装新的…

  • pycharm过期了_pycharm到期怎么延长

    pycharm过期了_pycharm到期怎么延长pycharm的LICENSE过期1.把jetbrains-agent.jar复制到bin目录下,我的是在download里,找了半天才找到2.vmoptions64和vmoptions最后加上-javaagent:/目录/jetbrains-agent.jar一定不要写错,写错出不来注册框3.注册框弹出来,选择Licenseserver方式,地址填入:http://jetbrain…

  • window location href页面跳转的几种用法及其延展「建议收藏」

    window location href页面跳转的几种用法及其延展「建议收藏」一、location.href常见的几种形式self.location.href;//当前页面打开URL页面 window.location.href;//当前页面打开URL页面 this.location.href;//当前页面打开URL页面 location.href;//当前页面打开URL页面 parent.location.href;//在父页面打开新页面 top.loca…

发表回复

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

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