使用CSS动态计算前景色，基于继承的背景色。

Question

我们正在改变网站的外观和感觉。许多元素的颜色正在改变。我们的次要按钮将从紫色背景白色文本更改为继承背景的红色边框： 我们在许多页面的数百个位置使用此按钮。它位于具有各种背景颜色（以及一些背景图像）的部分中。

对于旧的按钮处理方式，我不必担心确定文本颜色时的背景颜色。文本颜色始终是白色：

.secondary-button {
    color: white;
}

现在，字体颜色需要根据背景颜色进行更改。根据背景的深浅，它必须是白色或紫色。在浅色背景上，白色不起作用：

因为这个按钮在很多地方都使用到了，我不想每个按钮都手动选择。CSS 有没有一种方式可以根据背景的深度选择两种背景颜色中的一种？例如：

.secondary-button {
    color: calc(background-color>#999?purple:white);
}

我找到了一些用JavaScript实现的方法：基于背景亮度改变文本颜色？，以及语言无关的算法来计算颜色的深浅：根据背景颜色确定字体颜色，但是我找不到纯CSS解决方案。

- Stephen Ostermiller

---

你可以有的是：.secondary-button {color: white; } 和 .lightBG .secondary-button {color: black;} 你正在使用具有较浅背景的父元素来改变按钮的文本颜色。 - Andrew

很遗憾，我没有任何关于父元素背景颜色的通用类。其中许多使用自定义背景颜色。你的建议需要我浏览每个按钮使用的实例并在父元素上设置一个类。 - Stephen Ostermiller

如果背景可以是未知颜色的图像，那么没有 CSS 解决方案。您需要使用 JavaScript，而且一个强大的解决方案具有适度的复杂性（canvas）。 - thirtydot

基于背景图像的解决方案是理想的，但网站上只有少数几个地方适用。98%的时间，按钮都在纯色背景上。我会满意一个仅基于纯色背景的解决方案。 - Stephen Ostermiller

你可以随时应用RGBA背景颜色：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_color_rgba - 你仍然可以看到后面的内容，但你可以调整颜色，以便在任何表面上都能看到按钮。所以你可以使用：background-color:rgba(0,0,0,0.3); - Andrew

Answer 1

这是一种替代方法，但您可以使用暗色（虽然在某种程度上是半透明的）text-shadow，这将突出显示较浅背景下按钮的文本，并且在较暗背景下更或多或少不可感知。

例如：text-shadow: 1px 1px rgba(0,0,0,0.5), -1px 1px rgba(0,0,0,0.5), 1px -1px rgba(0,0,0,0.5), -1px -1px rgba(0,0,0,0.5);

示例：

div {
display: inline-block;
width: 280px;
height: 50px;
padding: 45px 5px;
}

div:nth-of-type(1) {
background-color: rgb(70,41,126);
}

div:nth-of-type(2) {
background-color: rgb(235,240,244);
}

.secondary-button {
width: 280px;
height: 50px;
color: white;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px rgba(0,0,0,0.5), -1px 1px rgba(0,0,0,0.5), 1px -1px rgba(0,0,0,0.5), -1px -1px rgba(0,0,0,0.5);
background-color: transparent;
border: 4px solid rgb(245,69,86);
border-radius: 15px 15px 15px 0;
}

<div>
<button type="button" class="secondary-button">Play the Demo</button>
</div>

<div>
<button type="button" class="secondary-button">Play the Demo</button>
</div>

- Rounin - Standing with Ukraine

---

我对你能够如此快速地从我的截图中用CSS重新创建出按钮的样式感到印象深刻。 - Stephen Ostermiller

嘿，谢谢你，@StephenOstermiller。事实上，我的平面设计感觉非常有限，所以我善于观察他人的平面设计，并在CSS中忠实地复制它们。 - Rounin

Answer 2

你可以使用SASS来实现这个！

@function set-notification-text-color($color) {
  @if (lightness($color) > 50) {
    @return #000000; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}

在这里，我们使用Sass的lightness()函数来确定哪种颜色更适合作为背景。lightness()函数是一个内置的Sass函数，它返回一个颜色的RGB值的亮度在0到100之间，其中0是最暗的，100是最亮的。

因此，在我们的函数中，我们接收一个颜色，如果该颜色的亮度值大于50，表示它是一种浅色，我们返回一种深色以确保良好的对比度。否则，我们返回一种浅色。

来源：使用Sass更改背景颜色

- Matheno

---

SASS是一个CSS生成器，对吗？这是一个有趣的解决方案，但我不使用SASS。 - Stephen Ostermiller

Answer 3

你可以使用CSS变量和calc的组合来实现这个根据这个答案。

- robocat

Answer 4

您可以使用RGBA来设置透明的背景颜色。

.secondary-button {
    color: white;
    background-color:rgba(0,0,0,0.3);
}

这是一个例子：

这里是一段文本。

.common{
  width:300px;
  height:300px;
  float:left;
  margin:0px 10px 10px 0px;
}
.purple{
  background:purple;
}
.grey{
  background:#ddd;
}
.blue{
  background:blue;
}
.green{
  background:green;
}
.secondary-button {
    color: white;
    background-color:rgba(0,0,0,0.3);
}
.button{
    margin:40px;
    padding:10px 10px;
    border:solid red 3px;
    display: block;
    text-align:center;
}

<div class="common purple">
<a href="#" class="secondary-button button">Button</a>
</div>
<div class="common grey">
<a href="#" class="secondary-button button">Button</a>
</div>
<div class="common blue">
<a href="#" class="secondary-button button">Button</a>
</div>
<div class="common green">
<a href="#" class="secondary-button button">Button</a>
</div>

在未来，将会出现透明的十六进制代码。现代浏览器正在考虑实现一个8位十六进制代码，其中最后两位数字可以调整透明度。

- Andrew

---

希望这对你有所帮助。我想你的设计师不会介意太多。因为它仍然展示了背景设计，只是稍微变暗了一点，当然你可以根据需要改变透明度。在每种表面上都能正常工作的按钮很难实现，尤其是在背景发生变化的情况下。 - Andrew