Question

我试图在按钮上实现一种红色，只有使用filter: brightness(x)才能获得。我对此有的问题是，最重要的是，利用这种风格略微但无误地将按钮的字体设置为像素，但它也会随背景一起提亮文字颜色。

我尝试在样式之后添加文本，但它完全相同。这个JSFiddle证明了所描述的问题。

我该如何反击或避免这种影响？或者在不使用亮度滤镜的情况下获得更亮的色彩？

Answer 1

首先，您可能会注意到亮度滤镜对您的背景颜色没有影响（删除文字并看到没有效果）只是因为您的颜色为red = rgb(255,0,0)并且此滤镜应用了线性变换，简单地乘以最大值为255的RGB值。在这种情况下，你有一个大于100％的值，所以颜色将保持不变！

＆＃13;

button {
  color: white;
  display:block;
  font-size: 1.8em;
  font-weight: bold;
  position:relative;
  background:red;
  border:none;
  width:200px;
  height:20px;
}


button:hover{
  filter: brightness(180%);
}

＆＃13;

<button></button>

＆＃13;

顺便提一下，想法是使用伪元素在应用过滤器的位置创建背景，并避免更改文本：

＆＃13;

button {
  color: white;
  display:block;
  font-size: 1.8em;
  font-weight: bold;
  position:relative;
  background:none;
  border:none;
}
button:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:rgb(180,20,20);
  z-index:-1;
}

button:hover::before {
  filter: brightness(180%);
}

＆＃13;

<button>The quick brown fox (hover me)</button>

＆＃13;

Answer 2

我很确定你可以用十六进制格式选择你喜欢的颜色。您可以找到许多提供托盘选择的网站。然后你可以删除像JSFiddle

这样的过滤器

button {
  color: white;
  display:block;
  font-size: 1.8em;
  background: #ff0022;
  font-weight: bold;
}

＆＃39;过滤器＆＃39;属性像素化我的字体？

2 个答案: