雪碧图的使用

最新推荐文章于 2024-10-14 13:29:43 发布

chirourou15

最新推荐文章于 2024-10-14 13:29:43 发布

阅读量102

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/chirourou15/article/details/122215267

版权

先定义一个class名为pic的div

<div class="pic">  </div>

在style中使用background属性定义雪碧图，
background：url(图片的地址) 重复/不重复距离x轴距离距离y轴距离

.pic{
  height: 80px;
  width: 80px;
  background: url(https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9922720e0cf3d7ca7b1e3c8cf91fbe096a63a95b.jpg) 
  no-repeat -10px -40px;
}

完整图片
在这里插入图片描述

效果图
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chirourou15

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

五步使用雪碧图

Britney10_21的博客

03-23

1839

五步使用雪碧图（CSS-Sprite）你以为我要跟你介绍这样的雪碧图？那你就大错特错了！此雪碧非彼雪碧，现在就跟我一起来瞧瞧吧！！一、什么是雪碧图 CSS雪碧即CSS-Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的部分图片。雪碧图被运用在众多使用了很多小图标的网站上。（ps:此处为度娘给我的答案）二、雪碧图的特点 1、一次性将多个图片加载进页面，可以提高页面的加载和访问速度； 2、降低请求次数之后便

Webpack中雪碧图插件使用详解

08-27

Webpack 中雪碧图插件使用详解 Webpack 中雪碧图插件使用详解主要介绍了如何使用 Webpack 中的雪碧图插件来优化图标的加载，减少 HTTP 请求数量，提高网站性能。在开发过程中，我们需要用到很多图标，这些图标的...

参与评论您还未登录，请先登录后发表或查看评论

css雪碧图使用

forgiveForever的博客

11-20

335

雪碧图，放大缩小

按钮变换及通用方式（雪碧图使用）

comegoing_xin_lv的博客

08-11

2180

通过图片来设置按钮变化

CSS---雪碧图使用

maidu_xbd的博客

07-16

229

雪碧图介绍及优点： CSS Sprites，CSS精灵，被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，然后通过CSS里面的background-position来控制每个图片的坐标。使用雪碧图只需要引用一张图片，可以减小图片的总大小，对内存和带宽更好。将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。制作：可...

你确定会用CSS Sprites（雪碧图）？

富朝阳的博客

02-19

3920

雪碧图也叫CSS精灵，是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。我们来看一张图片这张图片汇聚了10个小图片合成，每个小图片都有自己的像素定位点，那么如何生成雪碧图呢？CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。

移动端使用雪碧图

nunumaymax的博客

04-25

869

移动端使用雪碧图前言解决方法前言为了减少网络请求个数量，提高网站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，然后根据background-position来进行定位。在web端，通常先设置好图片的宽高，然后在psd视觉稿上测量出该图标的left 、top值，最后通过设置background-position 属性，就可以成功的显示出该图片。但是在移动端就不一样了，web端的单位统一为px，而移动端的单位为rem，并且各种手机的屏幕大小不一样，很难使用与web端相同的方法。所以普

雪碧图HTML人物,animateSprite-可控制雪碧图（sprites）动画的jQuery插件

weixin_32859127的博客

06-18

558

jquery.animateSprite是一款可控制雪碧图(sprites)制作动画效果的jQuery插件。通过该插件可以控制雪碧图播放、暂停、反向播放和更改播放动画速度等。安装可以通过npm或bower来安装animateSprite插件。bower install animatesprite使用方法使用该插件需要引入jQuery和jquery.animateSprite.js文件。HTML结构...

vue2/3项目中使用雪碧图

doudou1569568135的博客

11-11

458

使用时只需传入iconClass和className。

教你来使用雪碧图（CSS sprite）

热门推荐

Allenyhy的博客

08-07

6万+

什么是雪碧图？ 雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...

css sprite 雪碧图生成小程序

04-28

2. **缓存利用**：用户访问过使用雪碧图的网站后，其缓存中会保存该大图，再次访问时能快速加载。 3. **节省带宽**：虽然单个大图的大小可能大于所有小图的总和，但考虑到HTTP头部信息的传输，总体上仍能节省带宽。...

简易亚马逊雪碧图

09-12

"简易亚马逊雪碧图"可能是指一个简化版的亚马逊网站使用雪碧图技术的例子。这个压缩包文件中可能包含了亚马逊网站上用于各种元素（如按钮、图标、导航条等）的图片，这些图片被整合到了一张或多张大图中。开发者可以...

webpack中如何使用雪碧图的示例代码

12-09

一、什么是雪碧图？ CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用...三：如何使用雪碧图 雪碧图在之前有很多方式，如ps之类，现在最佳的

基于html的大模型调试页面

abments的博客

10-11

660

基于html的大模型调试页面

CSS高级技巧

探索软件工程的奥秘

10-09

1286

CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性花费时间（s）

uniapp实现页面开发中

CSDN_Admin0的博客

10-11

389

【代码】uniapp实现页面开发中。

在 CSS 选择器中，逗号（,）、空格（）和（无空格）区别

family20102010的博客

10-12

250

空格用于后代选择器（Descendant selector），它表示选择的是匹配左侧选择器的元素的后代（子、孙、曾孙等后代）中匹配右侧选择器的元素。空格分隔的选择器可以匹配同一棵 DOM 树中，具有特定层级关系的元素。逗号用于组选择器（Grouping selectors），它表示选择多个不同的选择器，并且为它们应用相同的样式规则。逗号分隔的选择器可以匹配不同的元素，但只有当元素匹配其中一个选择器时，样式才会被应用。值得注意的是，类选择器的顺序并不重要，只要元素的类名中包含所有类选择器的条件即可。

CSS 选择器的常见用法