CSS相同颜色的文本和背景与背景不透明度

Question

我想创建一个背景颜色为白色且不透明度为30％的表格。我可以通过以下CSS来做到这一点：

background-color:#ffffff;
opacity:0.3;
height:145px;

但我的问题是我想为文本提供相同的颜色（#ffffff）。但是当我将CSS更改为：

background-color:#ffffff;
opacity:0.3;
height:145px;
color:#ffffff;

我在桌子上看不到文字。有没有办法用#ffffff显示文字颜色和背景颜色，背景不透明度是30％？

Answer 1

opacity属性不适合此类问题，因为它会自动由子元素继承。如果表具有0.3不透明度，则其所有单元格（及其文本）将变为同等透明（details here）。要解决这个问题，你必须将这些孩子的不透明度重置为1，但这需要添加更多的CSS。

相反，让我建议几个简单的替代方案：

1。使用半透明的PNG图像

您可以在1x1px.com创建一个并将其下载到您的网站。

然后使用background-image引用它，例如：

background-image:url(path-to-your-image.png);
height:145px;
color:#ffffff;

2。使用CSS3的rgba能力

rgba能力为我们提供了一种更简单的方法，但it is not supported in IE8。如果您想支持此浏览器，请改用PNG图像技术。

这项技术的CSS是：

background-color:rgba(255,255,255,0.3);
height:145px;
color:#ffffff;

在此处查看此行动：http://jsfiddle.net/49d7rxm9/

来自这篇文章的答案：https://stackoverflow.com/a/806189/2391142

Answer 2

我认为你必须为表格使用渐变背景！ 像那样：

table {
  color: white;
  font-size: 20px;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
body,
html {
  height: 100%;
}
body {
  background: -moz-linear-gradient(to bottom, #FFFFFF, #ffffff);
  background: linear-gradient(to bottom, #FFFFFF, #101010);
}

<table>
  <tr>
    <td>
      <div>Row1 - Cell 1</div>
    </td>
    <td>
      <div>Row1 - Cell 1</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Row2 - Cell 2</div>
    </td>
    <td>
      <div>Row2 - Cell 2</div>
    </td>
  </tr>
</table>

http://jsfiddle.net/csdtesting/gwccqsh9/

Answer 3

您可以使用RGBA，假设您的身体/容器背景颜色较深。

http://jsfiddle.net/YoshiMaster/kxjezr5e/

div {
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
}

<div>

hello

</div>

Answer 4

虽然这在技术上是可行的，但我先说明我不建议使用这种方法。

文本应与背景颜色明显不同，以提供足够的对比度以便于阅读。使用这种方法将为普通人提供一些视力良好的文字，对于视力不佳的读者来说，这将介于困难和不可读之间。

现在谈谈如何：

您可以在文本后面使用文字阴影，在同一颜色的背景上使文字（有些）可读。

像

这样的东西

text-shadow: 0 0 8px #000;

就我所知，元素上的

提供了最清晰的方法。

请注意，IE 8或9不支持text-shadow，但适用于所有其他主流浏览器。