html – Internet Explorer 11模糊background-image with border
发布时间:2020-12-14 19:01:03 所属栏目:资源 来源:网络整理
导读:参见英文答案 IE11 making background image text blurry4个 我有一个具有border-radius和背景图像的div,这在所有浏览器中都很好地显示,除了Internet Explorer 11中,背景图像显示模糊. 我如何解决这个问题? span class="button boxsizing soundicon"/span C
参见英文答案 >
IE11 making background image text blurry4个
我有一个具有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 解决方法
将bg图像放在span元素中.这将使边框半径和背景图像保持不同的元素.
.element { border-radius: 7px; border: 2px solid #494742; } .element span { background-image:url('imagepath.png'); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |