logo标签列表

IE11使背景图像文字模糊

cssbackground-imagespriteinternet-explorer-11
7
我正在制作一个网站，在按钮上使用图像精灵。在我试过的其他浏览器中，除了IE11之外，我的精灵上的文本都很清晰，但在IE11中，文本变得模糊（请参见图像）。
模糊的是IE11。精灵的宽度为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">，那么文本就不会模糊。这只适用于背景 :/
1
最喜欢的部分：“这只是IE的缺陷吗？…” - Phlume
2
这是由于半径的原因。如果按钮没有半径，模糊效果就不会发生。不知道为什么。 - Christina
我曾有过类似的问题，我的问题（和答案）可以在这里找到：https://dev59.com/n2Ij5IYBdhLWcg3wmWG1 - wf4
4个回答
6
5
我建议不要把按钮作为精灵图，原因如下：
  1. 它不便于无障碍或SEO效果 - 屏幕阅读器和搜索引擎爬虫都无法读取图像中的文本。
  2. 需要额外的HTTP请求来下载精灵图像，这会使您的网站加载更慢 - 特别是在移动设备上。
  3. 除非将按钮比需要呈现在页面上的图像要大得多，并缩小，否则在高密度设备（例如新款全尺寸iPad和高端Android平板电脑、最近的Mac和高端Windows笔记本电脑）上放大时将出现模糊问题。显然，将图像变大超过必要大小意味着它更大，并加重了第二点的速度惩罚。
  4. 如果将来想要更改颜色方案，则只需更改CSS颜色属性，而不需重新生成新图像。
  5. 使用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源代码）-

按钮模拟

虽然只是一个粗略的模型（您可能需要改变比例，在悬停状态下添加渐变或更改背景-我无法查看原始精灵以了解您在悬停状态下制作的变换），但它已经非常接近原始效果，并具有上述所有优点-特别是解决您最初发布的文本问题。

2

我刚遇到了这个问题。

我把背景图片放在一个span标签中，以保持边框半径和背景图片在不同的元素中，这似乎解决了问题。

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

.item span {
    background-image:url('imagepath.png');
}
0
我通过使用:not(:hover)成功消除了模糊效果。它似乎会强制背景图像不模糊。
尝试添加
button:not(:hover) {
  width:189px;
  height:189px;
  background-image:url('../images/kontakt-os.png');
  background-position: top;
  cursor:pointer;
  border-radius: 100px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接