Question

在元素上使用select rid from RespondentAnswers where (QID , Answers ) in ( (2, '26-35'), (4,'ASHFIELD')) group by rid having count(*) =2;会导致Chrome和Firefox中的文字内部模糊。这是理想的行为吗？如果没有，这可以修复吗？这是展示这个问题的小提琴：

https://jsfiddle.net/dye2n0xv/

＆＃13;

wm_warn("You can't make a contrast with 'none' - guessing black. [WMWARN43]\n");

＆＃13;

filter: brightness(x)

＆＃13;

将鼠标悬停在按钮上并注意文字。当然，100％的例子是愚蠢的，在我的用例中我需要125％的东西，但是我想确保它不是浏览器试图显示比白色更白的白色，这是＆＃39;为什么我100％去了理论上根本不应该改变元素。

Answer 1

这本质上就是过滤器以及它们在CSS中的指定方式。

通常使用ClearType呈现文本（例如在Windows上）。清除类型需要不透明的背景。 ClearType使用子像素防眩化，因此您可以看到文字更清晰。在ClearType中，每个可寻址像素呈现事实上的三个“点”。

当你应用滤镜时，引擎会被迫为元素创建一个位图，在其上渲染内容，将滤镜应用于其像素并整体渲染最终位图。使用灰度抗锯齿在这样的位图上渲染文本。该方法不使用子像素AA，因此您看到文本更模糊。

更多信息：https://en.wikipedia.org/wiki/ClearType

如果您对插图有所了解，那么您将理解为什么ClearType不能与应用的[color]滤镜一起使用。

Answer 2

看到这是非常简单的代码，我假设这是正常的行为，并且没有你的错误。如果您不想要这种效果，最简单的方法就是在悬停时将按钮的背景更改为浅色。我确定它与使文本模糊的filter渲染系统有关，可能是因为brightness可能会将按钮作为图像，并忽略按钮内的文本是文本，并将其视为基本的颜色值，将它们移动，从而模糊它们

Answer 3

这是正常的，因为当你对元素应用CSS过滤器时，它的所有子节点都会受到影响。

您需要做的是将文字与背景分开，并仅在背景上制作滤镜。

这是一个例子

<button>
<span class="background"></span>
<span class="text">Some button label</span>
</button>

和CSS

button {
border: none;
background:none;
}

.text {
border: none;
color: #fff;
font-weight: bold;
padding: 10px;
z-index:1;
position:absolute;
}

.background:hover {
filter: brightness(125%);
}

.background {
width:140px;
height:40px;
background: linear-gradient(#53a423, #2f6c04);  
z-index:0;
position:absolute;
}

注意：由于z-index

，您需要一个javascript函数才能使过滤器悬停在文本上

CSS亮度过滤器模糊文本

3 个答案: