CSS-精灵图片的使用(从一张图片中截图指定位置图标)
大家好,又见面了,我是你们的朋友全栈君。
目录
一、名词解释
在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次请求–>响应–>下载,这样一来将会消耗大量的时间来下载这些小图标
所以为了提高网页响应速度,避免这个小图标加载耗费大量时间,于是将这些小图片全部放到一张图片上,例如下面的图是利用浏览器调试工具(通常为F12打开)从微博的请求中找到的,大家可以直接下载使用
二、使用难点
精灵图片的使用难点在于如何在这一张图片中定位到我们需要的部分,首先我们需要理解三个坐标:浏览器坐标、组件坐标、图片坐标,每个组件都有自己的坐标点,左上角为原点,往上y值为负数,越来越小;往左x为负数,越来越小
假如我们的组件的宽高分别为16px,图片宽高为200px,我们发现如果将图片作为组件的背景图片,将会从图片0,0左边点开始显示,只能显示图片的16px,因为组件只有这么大,多余的图片就被舍弃了。如下图片当图片原点和组件原点重叠的时候,组件只能显示图片的16px大小
假如此时我们想要截取图片中第二列中的亮的vip6,此时图片需要分别往左移动和往上移动一定距离如下。原来图片的坐标和组件的坐标重叠都是0,0,此时图片往上移动,相当于y减小了100px(假设值),此时y坐标为-100px;往左移动24px,此时x坐标为-24px,所以如果我们需要获取vip6图标,图片相对于组件坐标往左移动24px和往上移动100px就能取到
三、使用步骤
1.我们需要用到CSS中两个与背景图片有关的属性
- background-image: url(“图片地址”);
- background-position: x坐标 y坐标;
2.现在我们以取vip3和4以及微博认证为例
3.创建三个div,宽高分别等于vip3和4以及微博认证大小,如vip3和4宽高都为16px,微博认证x及y坐标分别为95px 35px
- 创建三个div
- 指定宽高、背景图片、图标所在位置
- 显示效果
四、程序源码
<!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>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137487.html原文链接:https://javaforall.cn
相关文章
- wordpress添加二级导航功能CSS代码
- html精灵图跟img标签,css精灵图怎么使用?
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- yuicompressor java_使用YUICompressor自动压缩JavaWeb项目中的JS与CSS文件
- css 更改所有text,CSS之cssText「建议收藏」
- 【罗盘时钟(星空版)—使用html,js,css编写。(附全部源代码+效果)】[通俗易懂]
- CSS的四种基本选择器和四种高级选择器[通俗易懂]
- 拥抱更底层技术——从CSS变量到Houdini
- 【说站】css中fraction如何使用
- 【说站】css中使用a标签的伪类选择器注意点
- 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS 最核心的几个概念
- TailwindCSS—一个用于实现快速UI开发的实用工具集CSS框架。
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- css样式小记详解编程语言
- 使用html+css+js实现计算器详解编程语言
- CSS基础 – position详解编程语言
- CSS十六种基本颜色详解编程语言
- CSS也能控制表格的交替颜色
- HTML-CSS群中单选引发的“事件”
- 编写纯CSS弹出菜单的原理及实现Byshawl.qiu
- IE和FIREFOX下CSS的区别与解决方法
- 简单的加密css地址防止别人下载你的CSS文件的方法
- JS+CSS实现的一种交互体验表单页面
- JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
- 使用PHP下载CSS文件中的图片的代码
- jqueryready函数、css函数及text()使用示例
- 使用jquery+CSS实现控制打印样式
- DOM基础教程之使用DOM+Css