css – 更新到IE11后的模糊背景图片

前端之家收集整理的这篇文章主要介绍了css – 更新到IE11后的模糊背景图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以今天早上我有一个自动更新到IE 11,检查我的眼睛后,似乎我的一些背景图像是模糊的.

我不得不检查,这不是我的形象导致问题,所以在启动Chrome后,他们是好的和清脆的再次…
我完全迷惑不解

我现在卸载IE11更新,他们再次漂亮,清脆的IE10 …有没有人遇到这个?

我已经在一个屏幕截图中显示了不同浏览器中的图像.

这里是一个jsfiddle的链接,我没有IE11不再测试,但它与我使用的相同的标记和CSS:http://jsfiddle.net/3g52E/

解决方法

那我可以看看是什么导致这个问题.这是你的._ui的边界半径.

现在我不能告诉你为什么会发生这种情况.但是,如果你想修复这个问题,你可以使用或不使用border-radius,这是一个更好的解决方案,我认为,使用< img>标签生成背景.

使用图像元素

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

现在截断你的形象,你可以使用位置:relative; position:absolute;和一个overflow:hidden ;:

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

这将添加在._ui _bre和._ui _com上的属性.

哪些基本图像属性是:

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

现在您可以使用顶部和底部的偏移量进行图像定位.在以前使用背景位置的地方:

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

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

这样,您的图像不再具有border-radius的元素的一部分,这导致了这个问题.他们现在有更明确的分离; 2个不同的元素.

jsFiddle

原文链接:https://www.f2er.com/css/216883.html

猜你在找的CSS相关文章