如何仅为父级设置不透明度？

Question

我的结构如下：

情况：我需要做一个透明的背景。所以我在容器中添加了不透明度：

.container{
  margin-top: 20px;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d9d9de;
  opacity: 0.5
}

主要问题是所有孩子的透明度都是0.5。如何将.box设置为100％白色背景且不透明？

像这样http://www.wix.com/demone2/street-photography-b#!blog/crkt照片 - ＆gt;透明块 - ＆gt;白块

Answer 1

您可以使用rgba()表示法指定包含Alpha通道的颜色。

在这种情况下，您可以使用类似background-color: rgba(255, 255, 255, 0.85)的内容（与您链接到的网站的设置相同）。对于不支持rgb()的浏览器，提供rgba替代方案通常是一种很好的做法（即使现在很少）。

.container{
  margin-top: 20px;
  margin-bottom: 15px;
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  border: 1px solid #d9d9de;
  opacity: 0.5
}