Question

我有一个带有CSS样式规则opacity: 0.4;的DIV。

在div中有一个a标记，文字也有不透明度。

我如何声明文字：opacity :1或任何好主意.... 您可以在以下链接中看到它：http：//yagen.org/

图库在页面上方。

Answer 1

如果设置元素的不透明度，则也会为其所有子元素设置不透明度。如果您想在透明背景上使用不透明文本，请查看RGBa。

结果看起来像这样：

.mycontainer {
    background: rgb(60, 60, 60);
    background: rgba(60, 60, 60, 0.4);
}

.mycontainer a {
    color: #fff;
}

如果浏览器不支持RGBa颜色，第一个背景声明可用作后备 - 它只是一个纯色。

这是RGBa颜色的绝佳参考：https://css-tricks.com/rgba-browser-support/

Answer 2

如果你有这种类型的HTML：

<div id="container">
    <p>
        Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.
    </p>
    <a href="#">This is a link</a>
</div>

即使你的CSS就是这样。

#container {
    background: #000;
    color: #fff;
    opacity: 0.4;
}

#container a {
    color: #ff0450;
    opacity: 1;
}

它不会使链接具有比容器更大的不透明度，因为不透明度是从父级继承的。

唯一的方法是使用rgba值，但在IE中不起作用。

正确的方法这样做 -

#container {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

看看这个fiddle

Answer 3

嗨这是一个简单的例子

HTML

  <section class="op5">
    <div class="op1">

    </div>
  </section>

CSS

 .op5{
        width:100px;
        height:100px;
        text-align:center;
        background-color:rgba(0,0,0,0.5);
        position:relative;
    }
    .op1{
        width:50px;
        height:50px;
        margin:0 auto;
        opacity:1;
        background-color:red;
    }

注意： - 在父级中我们使用了rgba格式，在children元素中我们使用了opacity属性

如何在容器div上设置不透明度而不在子文本上设置？

3 个答案:

HTML

CSS