更新到IE11后的模糊背景图像 [英] Blurry background images after update to IE11

问题描述

所以今天早上我得到了一个自动更新到IE 11，检查我的眼睛，看来，我的一些背景图像是模糊的。

So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.

我不得不检查它是不是我的形象导致的问题，所以在启动Chrome后，他们是好的和脆的一次...
我完全折腾。

I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again... I am completely baffled.

我现在已经卸载了IE11更新，它们在IE10中又一次很好用了。有没有人遇到过这个？

I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?

我包含了一个屏幕截图，显示不同浏览器中的图片。

I've included a screen shot showing the images in the different browsers.

这是指向 jsfiddle ，我没有IE11不再测试，但它与我使用的相同的标记和CSS： http ：//jsfiddle.net/3g52E/

Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/

推荐答案

我可以看到造成这个问题的原因。这是 ._ ui 的 border-radius 。

Well i can see what is causing this problem. It's the border-radius of your ._ui.

现在我不能告诉你为什么会发生这种情况。
但是，如果你想修复这个问题，你可以或不使用 border-radius 或者这是一个更好的解决方案，我的意见，使用<$ c

Now i can't tell you why this happens.
However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.

<img src="http://i.imgur.com/DauuVHW.png" />

现在要截断你的图片，你可以使用 position：relative; ， position：absolute; 和 overflow：hidden; ：

Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:

.block1 > div
{
    position: relative;
    overflow: hidden;
}

这将添加的属性._ ui _bre 和 ._ ui _com 。

基本图片属性包括：

img
{
    position: absolute;
    left: 2px;
}

现在您可以使用顶部和底部偏移进行图像定位。您在 background-position 之前使用的位置：

Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:

._bre._ui img
{
    top: -68px;
}

._com._ui img
{
    top: -24px;
}

这样，您的图像不是元素的一部分， $ c> border-radius ，这导致了这个问题。他们现在有一个更清晰的分离; 2个不同的元素。

This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.

这篇关于更新到IE11后的模糊背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！