本文翻译自：CSS opacity only to background color, not the text on it? [duplicate]
This question already has an answer here: 这个问题在这里已有答案：
Can I assign the opacity property to the background property of a div only and not to the text on it? 我可以将opacity属性分配给div的background属性而不是它上面的文本吗？
I've tried: 我试过了：
background: #CCC;
opacity: 0.6;
but this doesn't change the opacity. 但这不会改变不透明度。
#1楼
参考：https://stackoom.com/question/LXqt/CSS不透明度只对背景颜色-而不是文字就可以了-重复
#2楼
The easiest solution is to create 3 divs . 最简单的解决方案是创建3个divs 。 One that will contain the other 2, the one with transparent background and the one with content. 一个将包含其他2，一个具有透明背景和一个具有内容。 Make the first div's position relative and set the one with transparent background to negative z-index , then adjust the position of the content to fit over the transparent background. 使第一个div的位置相对并将具有透明背景的位置设置为负z-index ，然后调整内容的位置以适合透明背景。 This way you won't have issues with absolute positioning. 这样您就不会遇到绝对定位问题。
#3楼
我的诀窍是用颜色创建一个透明的.png并使用background:url() 。
#4楼
I had the same problem. 我有同样的问题。 I want a 100% transparent background color. 我想要100％透明的背景色。 Just use this code; 只需使用此代码; it's worked great for me: 它对我很有用：
rgba(54, 25, 25, .00004);
You can see examples on the left side on this web page (the contact form area). 您可以在此网页的左侧看到示例（联系表单区域）。
#5楼
For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically: 对于遇到这个帖子的人来说，这里有一个名为thatsNotYoChild.js的脚本，我刚才写的是自动解决这个问题：
http://www.impressivewebs.com/fixing-parent-child-opacity/ http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically, it separates children from the parent element, but keeps the element in the same physical location on the page. 基本上，它将子元素与父元素分开，但将元素保留在页面上的相同物理位置。
#6楼
Use: 使用：
background:url("location of image"); // Use an image with opacity
This method will work in all browsers. 此方法适用于所有浏览器。
