从具有渐变颜色的周围 div 继承 Bootstrap 按钮文本颜色答案

【问题标题】：Inherit Bootstrap button text color from surrounding div with gradient color从具有渐变颜色的周围 div 继承 Bootstrap 按钮文本颜色
【发布时间】：2016-04-07 01:32:52
【问题描述】：

我正在使用 MVC、ASP.NET 和 Twitter Bootstrap 设计一个网页。我想创建一个从周围 div 的背景颜色继承其文本字体颜色的按钮。当我将按钮 CSS 样式设置为 color: transparent 时，文本不可读，因为它与按钮颜色相同。

有没有办法在 CSS 中做到这一点，还是我必须使用 JS 或 jQuery 来实现这一点？

这是一个例子：

.red {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background: -webkit-linear-gradient(left, red 33%, #FFFFFF 66%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, red 33%, #FFFFFF 66%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, red 33%, #FFFFFF 66%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(left, red 33%, #FFFFFF 66%); /* Standard syntax (must be last) */
}

.custom {
  position: absolute;
  border: 1px solid black;
  top: 70px;
  left: 70px;
  background-color: orange;
}

<div class="red">
<button class="btn custom" type="input">
Button
</button>
</div>

【问题讨论】：

标签： html css twitter-bootstrap button linear-gradients

【解决方案1】：

使用这个 jQuery 代码：

var divColor = $(".red").css("backgroundColor");

$(".custom").css("color", divColor);

【讨论】：

这不起作用。我需要周围 div 渐变颜色中的文本字体，而不是静态颜色。 background-color: red 只是不支持渐变的浏览器的后备。