CSS精灵背景大小

-1

我有一个页面，我目前使用CSS图像精灵为图标作为背景。CSS精灵背景大小

我使用CSS sprites的问题是背景大小。我不确定什么是放大或缩小的最佳方式，以便我的图像不会模糊。

这是我的CSS目前;

background-image: url(../../img/registration_icons_720.png); 
background-size: 273px 342px; 
background-repeat: no-repeat; 
display: block; 
font-size: 25px; 
height: 60px; 
margin-top: 40px;

这就是图标目前的样子。 blurry icons CSS sprites

我的问题是，有人可以告诉我我做错了什么，以及找到使用CSS sprites的背景大小的最佳方法是什么？

非常感谢

来源

2017-10-20 Emma Robinson

您可以将这些图像转换为svgs或使用某些字体图标。 – curveball

那么如果你不想让你的图标变得模糊，你要么不缩放它们，要么将它们缩放50％，这也给你免费的高分辨率支持... – tobiv

-1

我已经最近有这个问题，而使用SVG精灵床单作为背景图像对我的图标/按钮。我今晚碰到你的线程，碰巧解决我的问题后不久，所以计算我会回复：

基本上，我意识到使用'background-size：包含'为个别SVG文件为我的图标设置它们的元素的“高度”与图标所需的大小相同，我的图标在Chrome/Firefox中都非常清晰。但是当我去使用精灵时，我不能再使用'background-size：contains'，因为我的精灵表中的图标大小不同。当使用具有“背景大小”的像素来调整大小时，它们在Chrome中变得稍微不简单，并且在Firefox中传递的方式太模糊。我愿意和他们在Chrome中清爽一点（他们看起来很好，我注意到大多数网站的图标与我正在处理的“不完美”大致相同），但在Firefox中却没有。

我的解决方案是让我的所有图标在Illustrator/my SVG文件中具有相同的“高度”，并以水平行显示它们。这样，我仍然可以在设置父元素的“高度”时使用'包含'作为'背景大小'，并且只需使用'背景位置'将水平图标的位置设置为我想要的'宽度'内的水平位置即可。然后，我只需在其元素上使用填充来制作任意大小的图标的可点击区域。

我不完全确定这会在使用PNG时有多大帮助，但假设您没有任何比其他任何图标都大得多的图标，并且您可以在Photoshop中调整您的PNG大小，以便它们都是一样的高度，它可能会对你有利。

希望这会有所帮助。

来源

2018-02-26 12:07:55 signinginagain

你能证明你的问题是否能解决你的问题并修复语法。这是非常难以阅读。部分似乎只是单词的集合。 –

这不是完美的，但它是一个非常好的回应。不是我的错，你无法阅读或者努力理解我在说什么。 – signinginagain

是我认为混乱的语法好不是话。 –

CSS精灵背景大小

回答

相关问题