img标签引入和背景图片引入雪碧图的使用

雪碧图制作-https://www.toptal.com

雪碧图制作-http://www.saoban.cn

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.img-style{width: 44px;height: 44px;object-fit: none;object-position: -44px -44px;}.bg-img{width: 44px;height: 44px;background-image: url(img/css_sprites.png);background-repeat: no-repeat;background-position: -44px -88px;}</style>
</head>
<body><img src="img/css_sprites.png" alt="" class="img-style"><div class="bg-img"></div>
</body>
</html>

img/css_sprites.png 雪碧图

img标签引入和背景图片引入雪碧图的使用相关推荐

前端工程师实战17：详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
浏览器常用的图片优化雪碧图/实体字符/svg
雪碧图唯一的优点是减少请求数,HTTP/1.1下浏览器同时加载资源的数量是一定的,IE6个,chrome 6个,firefox 8个,而HTTP2 下是没有数量限制的雪碧图的制作方法:node 的一 ...
前端基础入门之背景background-image 、雪碧图与渐变
文章目录背景 1. PS 的基本设置 2. 背景练习 1:线性渐变效果的背景图练习 2:按钮点击效果雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变背景 1. PS 的基本设置工 ...
CSS 背景图标（雪碧图、精灵图、iconfont）
目录雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
Web前端之背景、雪碧图
目录一.背景二.雪碧图一.背景 background-color 设置背景颜色 background-image 设置背景图片如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满 ...
第 08 课：自动生成雪碧图
背景在开发过程中,可能存在大量的小图片和小图标,虽然每张图的尺寸不大,但每次都需要发起一次 HTTP 请求,从性能优化的角度来说是不合理的.常见的做法是我们将多个小图片拼成一张大图(前端界叫做雪碧图 ...
关于前端Retina 屏幕兼容和基于Retina 屏幕兼容的雪碧图技巧
由于苹果电脑的普及,所以Retina 屏幕兼容越来越重要,在普通屏幕上正常的背景,在Retina 屏幕上都会发虚. 首先新建一个scss文件,起名为utils.scss ,在文件中写入下面代码: /* ...
让字体图标代替雪碧图，减少请求带宽
一.什么是字体图标 icon font 及使用场景从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

img标签引入和背景图片引入雪碧图的使用

img标签引入和背景图片引入雪碧图的使用

img标签引入和背景图片引入雪碧图的使用相关推荐

最新文章

热门文章