三分钟学会使用css雪碧图_F11 - 专业站长和开发者的学习网站

分享到

三分钟学会使用css雪碧图

css 来源：互联网作者：佚名发布时间：2023-01-31 20:30:42 人浏览

摘要

一. 先分析一下名字（有没有人跟我一开始一样疑惑为啥叫这名） Sprite 英文小精灵的意思，Sprite又叫小精灵图，恰好呢某绿瓶气泡水名也叫sprite，狠狠地撞名-_-||，所以咱也就习惯的叫

一. 先分析一下名字（有没有人跟我一开始一样疑惑为啥叫这名）

Sprite 英文小精灵的意思，Sprite又叫小精灵图，恰好呢某绿瓶气泡水名也叫sprite，狠狠地撞名-_-||，所以咱也就习惯的叫它雪碧图了。

二. 雪碧图的用途

雪碧图是一种网页图片处理方式。我们制作一张网页往往需要用到很多的图片，如果都用img导入，每张图片都需要向服务器发送请求，图片多了，服务器的负担就大了，用户使用过程中延迟也会增加。雪碧图通过将小图片整合在一张大图中，这样访问页面时大大减少了向服务器发送请求的次数。

往下↓看

有这样的

还有这样的

三. 如何使用雪碧图

首先我们先要了解雪碧图的使用是通过调整窗口视角的位置来显示大图中不同的小图案

1 准备一个“窗口” （需要设置宽高雪碧图作为背景图无法独立撑起容器）

2 在style样式中选中窗口并通过background-image导入背景图（雪碧图）

3 通过属性background-position：x y;来调整雪碧图的位置使窗口显示出不同的图案。x和y中间用空格隔开否则无法正常显示。原点为（0 0）x取负值表示向右，y取负值表示向下，负的越多偏移越大

四.演示

.p1 {

width: 24px;

height: 24px;

margin: 0px 28px;

float: left;

}

.p2 {

width: 24px;

height: 24px;

float: left;

margin: 0px 28px;

background-position: 0px -70px;

}

.p3 {

width: 24px;

height: 24px;

float: left;

margin: 0px 28px;

background-position: 0px -140px;

}

上述演示中雪碧图图像间隔为70px，通过background-position来不断调节显示的图像

您可能感兴趣的文章 :

原文链接 :

Tag : css(227)

CSS3使用双旋转实现福到了的迎春喜庆特效代码

春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了
三分钟学会使用css雪碧图

一. 先分析一下名字（有没有人跟我一开始一样疑惑为啥叫这名） Sprite 英文小精灵的意思，Sprite又叫小精灵图，恰好呢某绿瓶气泡水名也叫
css实现文字充电效果的代码

今年Apple推出了搭载M2芯片的新款MacBook Pro和MacBook Air，得到消息第一时间也是去Apple官网看看介绍，看看他们的产品网页，这次没有什么特别
CSS动画实现跳动的足球(疯狂世界杯)

022卡塔尔世界杯正在如火如荼的进行之中，作为诸神的黄昏，本届世界杯备受瞩目，足坛巅峰老将c罗，梅西，内马尔也将随本次世界杯退役
利用css动画实现节流的介绍

节流指的避免过于频繁的执行一个函数，例如：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，不
CSS3实现一根心爱的二踢脚的代码

2023春节快到了，虽然还在上班，但心情早已开始激动，感叹2022终将过去，喜迎2023兔年吧。让我以激动的心情，利用所学css3代码知识，实现
CSS预处理器scss/sass语法及使用教程介绍

scss scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，使用scss可以很方便的提高开
CSS样式覆盖的操作代码

在页面中，我们常用id、class以及内联样式表来设置我们的组件CSS。有时候我们为了编码的简便会使用CSS库，这些库会设置好全局的CSS，但是
table设置超出部分隐藏，鼠标移上去显示全部内容

table内容超出宽度时隐藏并显示省略标记 HTML中，一个表格，要达到二个条件： 1、内容多了不自动换行； 2、固定单元格宽度。如果内容超出
table不让td文字溢出操作方法

核心代码 1 2 3 4 5 6 7 8 9 10 11 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%