具有背景颜色和不透明度的 CSS div 以及 div 内的文本答案

【问题标题】：CSS div with background color and opacity and text inside div具有背景颜色和不透明度的 CSS div 以及 div 内的文本
【发布时间】：2014-05-09 11:58:38
【问题描述】：

我有这个 div：

<div class="entry-content" style="background: rgba(160, 160, 160); opacity:0.5; display:inline-block; border-radius: 5px; padding:20px;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis mauris leo. Pellentesque vehicula nunc nec volutpat lobortis. Aliquam pretium felis non ullamcorper bibendum. Donec mollis velit porta ipsum euismod, id aliquet felis auctor. Fusce lacinia fermentum mi eu elementum. Sed dignissim elit a ullamcorper ornare. Proin a justo id risus suscipit condimentum vitae ac purus. Nunc nec lacinia justo, vitae elementum leo. Phasellus sit amet suscipit orci. Cras id mi eget nunc scelerisque condimentum commodo a est. Aliquam a tortor a metus hendrerit commodo eu quis felis. In dictum semper ante sit amet faucibus.</p>
</div>

而且不透明度效果有点太好了，因为我的文本也应用了不透明度...解决此问题的最佳方法是什么？

【问题讨论】：

为什么不为您的 div 设置 rgba(160, 160, 160, .5) 而不是设置 opacity:.5？无法将 div 的子项不透明度保持在 1 而 div 本身的不透明度为 .5
@KingKing 他也将不透明度加倍，这没有任何意义。如果您希望保持entry-content 的不透明度，您最好的选择是在其中添加另一个具有position:absolute 的div 并填充父div。之后，您可以对其应用不透明度。您可能还需要将z-index 应用到内部 div，以便它显示在文本下方。

标签： html css opacity

【解决方案1】：

你用过

   rgba(160, 160, 160,0.5);

使用第四个参数可以设置背景的不透明度。并使用

   opacity:0.5

您设置 div 内容的不透明度。只需使用 rgba 即可修复它，不需要不透明度。

【讨论】：