IE11制作背景图片文字模糊

我的工作网站，在那里我用图像精灵上的一个按钮上。在我试过的其他浏览器中，除了IE11以外，我的精灵上的文本应该是清脆的，但在IE11中，文本变得模糊（请参阅图像）。IE11制作背景图片文字模糊

IE11 Other browser

的模糊一个是IE11 OFC。精灵的宽度是189px，高度是378px。我使用下面的CSS：

button { 
    width:189px; 
    height:189px; 
    background-image:url('../images/kontakt-os.png'); 
    background-position: top; 
    cursor:pointer; 
    border-radius: 100px; 
} 

button:hover { 
    background-position: bottom; 
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0); 
}

所以，这只是一个IE漏洞，或者我真的可以做些什么吗？

在此先感谢。

编辑：我可能只是添加，如果我只是插入相同的图像<img src="lala.png">文本不模糊。它仅适用于背景：/

来源

2013-12-21 Denver Dang

最喜欢的部分：“这只是一个IE漏洞... – Phlume

这是由于半径如果按钮没有半径，模糊不会发生不知道为什么 – Christina

我也有类似的？。问题，我的问题（和答案）在这里：http://stackoverflow.com/questions/20093634/blurry-background-images-after-update-to-ie11 – wf4

这是一个正常的IE漏洞。

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

我还没有找到这个问题的任何解决方案呢。

来源

2013-12-21 21:34:13 Softwarehuset

我建议不具有该按钮，一个精灵在所有以下reasons-

这是无法访问或SEO高效 - 既不屏幕阅读器，也没有搜索引擎爬虫可以读取图像中的文本。
它需要一个额外的HTTP请求，下载精灵形象，这会让你的网站加载速度比较慢 - 特别是在移动设备上
除非你使按钮多比它需要在页面上呈现较大，那么在扩展高密度设备（如新型全尺寸iPad和高级Android平板电脑，近期Mac和高级Windows笔记本电脑）时，您将遇到模糊问题。明显地使图像比所需要的更大意味着它更大并且加剧了从第二点开始的速度损失。
如果你想在未来的任何一点改变颜色方案，你只需要改变你的CSS颜色属性，而不是重新生成新的图像。
这是琐碎使得该按钮看起来像在CSS的屏幕截图。

如果你使用的标记像这个 -

<button class="text-button" type="button">Send Besked</button>

和CSS像这个 -

.text-button { 
    background: #b32e01; 
    border: none; 
    border-radius: 8px 8px 8px 0; 
    color: #ffffff; 
    cursor: pointer; 
    height: 3em; 
    outline: none; 
    padding: 1em 0; 
    text-transform: uppercase; 
    width: 12.5em; 
} 

.text-button:hover { 
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0); 
}

它结束了看起来像这样（见JSFiddle for source） -

Button mockup

虽然只是一个粗略的模型（你可能想要改变比例，添加一个渐变或改变悬停的背景 - 我看不到原始精灵知道你在悬停状态精灵中做出的转换），它看起来很像原创，并具备以上所有优点 - 特别是它应该解决您最初发布的文字问题。

来源

2014-01-01 15:52:07 pwdst

我发现通过使用not（：hover）成功消除了模糊效果。这似乎迫使背景图像不模糊。

尝试增加

button:not(:hover) { 
    width:189px; 
    height:189px; 
    background-image:url('../images/kontakt-os.png'); 
    background-position: top; 
    cursor:pointer; 
    border-radius: 100px; 
}

来源

2014-03-25 19:41:17 Andy

我刚刚遇到这个问题。

我只是将背景图像放在一个范围内，以保持不同元素上的边框半径和背景图像，似乎已经完成了这个技巧。

.item { 
    border-radius: 8px 8px 8px 0; 
} 

.item span { 
    background-image:url('imagepath.png'); 
}

来源

2014-12-14 11:34:52 sarah3585

IE11制作背景图片文字模糊

回答

相关问题