精华内容
下载资源
问答
  • 精灵图定位

    千次阅读 2019-08-19 12:58:23
    .search em{ position: absolute; top:8px; right: 90px; width: 20px; height: 20px; background: url(…/images/sprite-search.png) no-repeat; } .search em:hover{ .../* 精灵图第一个值是X轴的...

    .search em{
    position: absolute;
    top:8px;
    right: 90px;
    width: 20px;
    height: 20px;
    background: url(…/images/sprite-search.png) no-repeat;

    }
    .search em:hover{
    background-position: -30px 0;
    /* 精灵图第一个值是X轴的值 第二个值是Y轴的值,基本上都是负的多少多少 */
    }

    精灵图本质:
    用一张大图包含所有小图,最关键的地方在于使用backgrond-postion属性精确定位

    展开全文
  • 前端的精灵图制作以及精灵图定位

    千次阅读 2017-12-15 16:34:45
    如何操作,并找到需要更改的精灵图位置,进入到页面,点击F12,点击箭头,点击加号然后再右下方的框里,找到精灵图的图片,最右侧就会有图片所在文件,然后更改图片便是

    https://jingyan.baidu.com/article/1709ad8077cdb04634c4f017.html
    如何操作,并找到需要更改的精灵图位置,进入到页面,点击F12,点击箭头,点击加号然后再右下方的框里,找到精灵图的图片,最右侧就会有图片所在文件,然后更改图片便是

    展开全文
  • [img=https://img-bbs.csdn.net/upload/201611/02/1478080726_990314.png][/img] [img=... ... ... ...想要把不同位置的小图片遍历在ul列表内,可是木有反应 ,不知道哪里出了问题,求大神解答
  • 精灵图利用background-image,background-repeat,background-position的组合进行背景定位,background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。本教程操作环境:windows7系统、CSS3&...

    精灵图利用background-image,background-repeat,background-position的组合进行背景定位,background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。

    8594d479bd6760c9f166a6faf87261c9.png

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css精灵图,其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。

    这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。

    精灵图产生背景:

    1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。

    2、网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites)

    精灵图的定义:

    1、很多图片融合在一张图上,通过背景定位的方式将图标显示在每个盒子中。

    2、背景定位的方式主要通过控制x和y轴的值。

    利用“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

    精灵图使用技巧:

    1、一般情况:直接一个盒子,里面的背景图片是精灵图,使用时注意x轴和y轴。

    2、特殊情况:盒子中有一个小图标,此时,小图标外套一个标签(i标签或者span),给小图标设置定位后(自动转成行内块)定义宽高,这个宽高就是精灵图中的小图的宽高,然后注意x轴和y轴的值。

    示例:

    精灵图

    6a07b1af442853936d2e0667464bf11b.png

    HTML代码

    css代码ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}

    ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}

    ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;

    overflow:hidden;background-image: url(ico.png);background-repeat:no-repeat;}

    ul.Sprites li a{ padding-left:5px}

    ul.Sprites li span.a1{ background-position: -62px -32px}

    ul.Sprites li span.a2{ background-position: -86px -32px}

    ul.Sprites li span.a3{ background-position: -110px -32px}

    ul.Sprites li span.a4{ background-position: -133px -32px}

    ul.Sprites li span.a5{ background-position: -158px -32px}

    效果图:

    1e25a0d7231431906437bddf19d5e919.png

    css sprites关键代码与解释ul.Sprites li span.a1{ background-position: -62px -32px}

    ul.Sprites li span.a2{ background-position: -86px -32px}

    ul.Sprites li span.a3{ background-position: -110px -32px}

    ul.Sprites li span.a4{ background-position: -133px -32px}

    ul.Sprites li span.a5{ background-position: -158px -32px}

    首先对ul.Sprites li span引入背景

    ul.Sprites li span{ background-image: url(ico.png);background-repeat:no-repeat;} 给span设置css背景图片。

    再分别对不同span class设置对于图标背景定位具体值ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px,向上“拖动”32px开始显示此背景图标

    ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px,向上“拖动”32px开始显示此背景图标

    ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px,向上“拖动”32px开始显示此背景图标

    ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px,向上“拖动”32px开始显示此背景图标

    ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px,向上“拖动”32px开始显示此背景图标

    关键:

    背景background-position有两个数值,前一个代表靠左距离值(可为正可为负),第二个数值代表靠上距离值(可为正可为负)

    背景background-position有两个数值可以为正可以为负,当为正数时,代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片;当为负数时代表背景图片作为盒子对象背景图片,将背景图片拖动超出盒子对象左边多远,拖动超出盒子对象上边多远开始显示此背景图片。

    (学习视频分享:css视频教程)

    展开全文
  • 定位+精灵图时,精灵图缩放用法

    千次阅读 2019-03-04 10:37:10
    定位+精灵图时,精灵图缩放用法欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容...

    定位+精灵图时,精灵图缩放用法

    问题背景

    sprite
    在精灵图的原图中,这个标志只有11px11px,但我想放大成33px33px

    讲解

    修改前

    修改前

    // An highlighted block
        <div class="bg">
            <a href="#" class="left"></a>
            <a href="#" class="right"></a>
        </div>
    
    // An highlighted block
            .left {
                display: block;
                width: 11px;
                height: 11px;
                position: absolute;
                background: url("images/sprites3.png") no-repeat;
                background-position: 0 -85px;
                background-size: 152px 144px;
                top: 50%;
            }
    

    这里我们看到左a标签太小,需要缩放。
    思路:
    1.缩放a的width,height
    2.将background-size,缩放相应的倍数
    3.background-position,也放大三倍

    修改后

    // An highlighted block
            .left {
                display: block;
                width: 33px;
                height: 33px;
                position: absolute;
                background: url("images/sprites3.png") no-repeat;
                background-position: 0 -255px;//原本 0 -85px
                background-size: 462px 432px;//原图152*144,在这里放大三倍
                top: 50%;
            }
    

    修改后的效果

    展开全文
  • 精灵图产生背景: 1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。2、网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,...
  • CSS精灵图应用

    2021-10-11 08:46:49
    目录 一、为什么使用精灵图?有何缺点? 二、使用步骤 1.完成以下效果精灵图的使用 ...使用精灵图为了有效减少服务器接受和...我们可以在一个div里面放九个li标签来放置精灵图,再使用定位将精灵图定位在相应的li标
  • 雪碧图/精灵图: 精准定位

    万次阅读 2020-03-08 15:38:16
    对于一张雪碧图/精灵图来说,是可以帮助我们前端减少资源请求数目的,将需要的图片都归纳在一个网络请求中,这样就减少了请求数,即提高了性能。 但是,对于雪碧图的定位来说也是比较头疼的,常常需要打开PS去算。 ...
  • 最近在学习jQuery的练习中被视频中的精灵图定位弄晕了,视频中的精灵图是条状的,我的图片素材是随便找的一个是块状的,而且视频中的参数都是发布视频的人提前弄好的。 这是我找到的图片如下: bg.png(图片来自...
  • 一、 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图。就是将导航的背景图,按钮的背景图等有规则的合并成一张背景图,即多张图合并为一张整图...
  • 精灵图片绝对定位的三种方式(伪) 有强迫症的我为此困扰了一上午,说白了还是自己实力不够,想法总被局限。 实现结果如上中间的为最终满意样品
  • 1在firework里面把精灵图等比例缩放为原来的一半 2之后再根据大小测量坐标 3css里面background-size写成精灵图大小的一半,宽度一半高度auto 注意,缩放后不要保存! ...
  • 精灵图

    2019-03-17 17:07:00
    什么是精灵图? ---精灵图是图片的合成技术 css精灵图作用?...--css的精灵图需要配合背景图片1和背景定位来使用 <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="displ...
  • css sprites(精灵图),也被称为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能。css sprites...
  • 图片精灵快速定位工具-spritecow

    万次阅读 2020-03-01 16:41:53
    最近在练习做NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章的3.8-使用精灵图片(sprite)时,视频里面使用了一款在线的图片精灵快速定位工具spritecow,其官方网址为:...
  • CSS精灵图

    千次阅读 2018-11-04 20:27:12
    精灵图 CSS精灵图也可以说CSS雪碧图 就是将多个小的图片整合在一张图上,这样就可以减少浏览器向服务器请求的次数,可以提高网页的加载速度。 使用精灵图时一定要注意显示精灵图的这个容器一定要比背景图片小才...
  • 什么是css精灵图(sprite)?css精灵图怎么使用?下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在了解精灵图怎么使用前,我们要先知道什么是...
  • css精灵图

    2021-10-09 12:13:29
    css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到...
  • css之精灵图

    2019-07-29 22:34:04
    什么是精灵图? css精灵图是一种图像合成技术 精灵图作用:可以减少请求...css精灵图需要配合背景图片和背景定位来使用。 需要注意的一点是: 在使用定位时,在前端中,x轴水平向右为正,而y轴则是垂直向下为正 ...
  • web——CSS精灵图(背景图、定位背景图片background-position 属性)一、background-position属性二、实例 一、background-position属性 例如下图,若我们只需显示其中一部分 我们可以设置一个div,并设置如下两个...
  • 1.什么是精灵图精灵图就是一张图片中显示了页面中多个地方使用的图片,如 2.为什么使用精灵图?... 将精灵图作为背景图片引入,在利用图片定位进行调整位置 div { background:url(); ...
  • css sprite(精灵图)的 定位和缩放 详解 项目演示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804233110379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM...
  • ps测量精灵图

    千次阅读 2018-08-08 14:49:50
    1.调出图片信息 2.测量图片大小、 3.把鼠标放在需要用到的小图片的左上角 ...精灵图的使用:B站精灵图的使用第24集 李江南讲解精灵图第44集     定位口诀:子绝父相(孩子是绝对定位,父亲是相对定位;)...
  • 精灵图在线工具

    千次阅读 2019-12-02 10:09:59
    生成精灵图 工具网站推荐 精灵图自动检测工具网站推荐

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,211
精华内容 4,484
关键字:

精灵图怎么定位