【问题标题】:sprite image quality poor精灵图像质量差
【发布时间】:2011-01-27 19:01:03
【问题描述】:

我已经为网站中使用的所有图像创建了一个精灵图像(.png,.jpeg,.gif)

早些时候,当我使用 imageurl 获取图像时..图像的质量,例如显示日历的日历图标..很好..完美

但是,当我开始获取图像时……使用 css 文件……使用背景:图像 url(精灵图像的路径和位置)……图像质量下降……

我已经尝试以所有可能的格式创建我的精灵图像..!!.. 有什么解决方案可以保持质量并仍然通过精灵生成的图像获取图像!

图片的CSS:

.sprite-calendar
{
   background: url(images/csg-4d4146d95bbab.png) no-repeat top left;
   background-position: -480px -1249px; 
   width: 16px; 
   height: 16px; 
}

【问题讨论】:

  • 实现精灵不应降低图像的质量。你的浏览器放大了吗?您的图像编辑软件上的导出设置是什么?
  • 我应该为图像编辑软件提供哪些设置.. 浏览器没有放大..
  • 这取决于你的软件,你用的是什么?
  • 我不认为这是问题所在?像这样..!!
  • 好的,我们可以看看你的例子吗?这对解决您的问题有很大帮助:)

标签: asp.net css sprite


【解决方案1】:

您是否有机会使用 CSS 缩放图像?你不应该这样做,因为它会降低质量。

【讨论】:

  • .sprite-calendar{background: url(images/csg-4d4146d95bbab.png) no-repeat top left;背景位置:-480px -1249px;宽度:16px;高度:16px;这就是我的日历精灵图像 css 的样子
  • @pratek - 16px 的宽度和高度是否与实际图像匹配?如果没有,请删除宽度和高度属性并尝试。
  • hmm.. 好的,我会尝试这样做.. 即使我试图通过精灵图像获取我的网站的徽标.. 使用 css.. 徽标很好.. 但是来了有一个白色的边框..和一个白色的盒子和左侧顶部的十字标志.??!!
  • @adarsh - 没有提到宽度和高度属性..图像带有一个红色交叉的白框..
  • @prateek - 红叉白框?你也在使用 img 标签吗?如果您使用精灵,则不应使用它们。摆脱所有 img 标签。
猜你喜欢
  • 2018-08-24
  • 2020-10-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-09
  • 2012-09-20
  • 2020-03-24
  • 2017-01-09
相关资源
最近更新 更多