Question

我有一个带有border-radius和背景图像的div，这在所有浏览器中都能很好地显示，除了在Internet Explorer 11中，背景图像显得模糊。

我如何解决这个问题？

<span class="button boxsizing soundicon"></span>

CSS：

.roomscene .top .roominfo .center span.button {
    height: 29px;
    width: 29px;
    background-color: #23221d;
    border-radius: 7px;
    border: 2px solid #494742;
    margin-top: -10px;
    display: inline-block;
    float: right;
}

.roomscene .top .roominfo .center span.button:hover {
    background-color: #2f2d27;
    cursor: pointer;
}

.roomscene .top .roominfo .center .soundicon {
    background: #23221d url('../images/rooms/roominfo/soundicon.png') no-repeat center center;
}

编辑：

我注意到如果我从.soundicon（或span.button的边界半径）移除背景的“中心”位置，模糊消失，但我无论如何需要正确定位我的背景..

EDIT2：

IE11真的很奇怪，似乎如果我在px中指定位置而不是中心或50％，背景图像不会模糊/乱。

Internet Explorer仍然是一个糟糕的浏览器。

EDIT3：

没有，对于px位置，在某些图像上已经模糊，但是比使用中心/%时要少。

现场例子：

http://codepen.io/toomuchdesign/pen/ojspA

Answer 1

将bg图像放在span元素中。这将使边框半径和背景图像保持在不同的元素中。

.element {
    border-radius: 7px;
    border: 2px solid #494742;
 }

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

Internet Explorer 11模糊带有border-radius的背景图像

1 个答案: