html雪碧图效果,html和css中雪碧图的使用

雪碧图：多个图片集成在一个图片中的图

使用雪碧图可以减少网络请求的次数，加快运行的速度。

例如要使用下面的雪碧图：需要用到background-position属性

代码示例：

#container div{ /* 空格后代选择器：选中下面的所有的div*/

height: 25px;

width: 25px;

color: red;

background-image: url("../../img/ico1.gif");

}

#div2{

background-position: -42px 0;/*图片往左移动42个px*/

}

#div3{

background-position: -165px -28px;/*图片往左移动165个px 图片向上移动28个px*/

}

雪碧图

代码运行结果：

--------------------- 原文：https://blog.csdn.net/xuehyunyu/article/details/72773727

html雪碧图效果,html和css中雪碧图的使用相关推荐

html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
CSS中雪碧图CSS-Sprite的使用，解决图片闪烁问题
背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源分别引入会导致的问题: (1)切换图片时,会 ...
css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...
HTML、CSS中雪碧图的使用
雪碧图:多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数,加快运行的速度. 例如要使用下面的雪碧图:需要用到background-position属性代码示例: <!DOCTYP ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结欢迎点赞,收藏,加关注前言此例子是用微信小程序组件swiper来实现轮 ...
猿人学试题（非常简单js混淆、雪碧图、样式干扰 css加密、js混淆源码乱码、js混淆动态cookie、访问逻辑）
学习目标: python学习-猿人学试题学习内容: 1.非常简单js混淆 2.雪碧图.样式干扰 css加密 3.js混淆源码乱码 4.js混淆动态cookie 5.访问逻辑 1.非常简单js混淆试 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
html雪碧图效果,8.使用背景图，制作雪碧图效果
本文将为您描述8.使用背景图,制作雪碧图效果,具体操作方法: 使用背景图,制作雪碧图效果: Document .img{ width:150px; height:150px; border:2px s ...

html雪碧图效果,html和css中雪碧图的使用

html雪碧图效果,html和css中雪碧图的使用相关推荐

最新文章

热门文章