html - 实现 css Sprite 图像

标签 html css css-sprites

我比较 sprite 中的所有图像,不决定哪个选项更好:

<img src="./img/sprite.png" height="63" width="193" class="sprite-class" alt="">

.sprite-class {
  object-fit: none;
  object-position: -440px -315px;
  font-family: 'object-fit: none; object-position: -440px -315px;';
  height: 63px;
  width: 193px
}

还有一些用于IE的js代码

第二个选项:

<div class="sprite-class"></div>

.sprite-class {
background-position: -494px -20px;
width: 63px;
height: 193px;
background: url(./img/sprite.png) 0px 0px no-repeat;
margin: 0 auto;}

Last 在没有 js 的情况下在 IE 中工作,但是将 div 用于显示 Logo 和其他图像是否很好?感谢您的回答!

最佳答案

不,为了显示 Logo ,您不应该使用背景图片。这篇文章可能对你有帮助,When to use IMG vs. CSS background-image?

关于html - 实现 css Sprite 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39648424/

相关文章:

javascript - Array 中时间序列对象的移动平均值

html - Firefox 问题渲染旋转图像与透视

javascript - 使用 html 和 javascript 进行表单验证

css - 在基于 Gecko 的浏览器中消失的 CSS 表格单元格边框

javascript - 在 jquery 中检测滚动并更改操作

html - 我正在尝试使用 CSS 水平显示图像

javascript - HTML 5 - 非常简单的动画

html - CSS3 输入选择器

css - 使用 Css Sprite 和背景位置

使用 sprite 的 CSS 两个背景图像