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

Question

我正在使用 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>

Answer 1

使用这个 jQuery 代码:

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

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