CSS - 低不透明度 div 上的不透明文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2401953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Opaque text on low opacity div?
提问by Dan
I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
我有一个不透明度为 60% 的 div，以显示 div 后面的背景图像的一部分。由于不透明度为 60%，该 div 中的文本显示为灰色。
Is there anyway to override this level and make the text appear black?
无论如何要覆盖这个级别并使文本显示为黑色？
Any advice appreciated.
任何建议表示赞赏。
Thanks.
谢谢。
回答by Quentin
Set the opacity on the background rather than the element.
在背景而不是元素上设置不透明度。
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
不久前，我写了一篇关于如何以向后兼容的方式实现这一目标的文章。
回答by JohnTheTinkerer
I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.
我过去曾在我自己的网站上对此进行过试验。到目前为止，实现您想要的最简单方法是创建一个单像素 .PNG 图像，其不透明度设置为小于 100%（即部分透明），并将其用作背景图像。默认情况下，它将填充整个包含元素 - 如果没有，请确保将 CSS background-repeat 属性设置为“repeat”。
Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.
通过这种方式，您不必为包含元素本身设置透明度，因此其文本的不透明度将不受影响。
Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.
令人惊讶的是，现在只是做一个半透明的单像素的PNG工具在这里。
回答by Johann Philipp Strathausen
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
不透明度适用于整个 div 及其所有子级。不幸的是，您无法撤消该不透明度，而只能添加更多。除此之外，CSS 无法选择元素内的文本。
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
在您的情况下，最好的解决方案是将透明背景图像（带有 PNG）应用于您的 div 块，例如具有 60% 不透明度的白色单像素图像。
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
另一种解决方案是使用不同的框和定位，如Steven York在本教程中所述。
回答by CIDIC
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
这应该回答你所有的问题：http: //css-tricks.com/non-transparent-elements-inside-transparent-elements/
回答by DisgruntledGoat
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
最简单的解决方案是创建一个具有正确颜色的半透明 PNG 并将其用作背景图像。
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
根据您的布局，另一种可能的解决方案是将文本放在单独的图层中，并将其放置在半透明部分的顶部。像这样的事情会起作用：
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, widthand heightproperties) as appropriate.
你需要添加自己的位置/尺寸（中top，left，width和height属性）为适当。
