Css 如何覆盖子对象的不透明度_Css

Css 如何覆盖子对象的不透明度

css

Css 如何覆盖子对象的不透明度,css,Css,我正在尝试将“演示文本4”的不透明度重置为1.0，其中其容器的不透明度设置为0.3。我读到我可以直接使用：颜色设置文本： rgba（255,255,0,1）；但这对我不起作用。有没有办法实现我的目标 <!DOCTYPE html> <html lang="en"> <head> <style> #text_holder { background: blue; width: 500px; height: 200px; } #text_holder

我正在尝试将“演示文本4”的不透明度重置为1.0，其中其容器的不透明度设置为0.3。我读到我可以直接使用：颜色设置文本： rgba（255,255,0,1）；但这对我不起作用。有没有办法实现我的目标

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#text_holder {
background: blue;
width: 500px;
height: 200px;
}
#text_holder2 {
background: blue;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}

#alpha_30 {
opacity: 0.3;
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
</style>
</head>

<body>


<div id="alpha_100">
<div id="text_holder">
    <p>Demo text 1</p>
</div>
</div>

<div id="alpha_30">
<div id="text_holder">
    <p>Demo text 2</p>
</div>
</div>

<div id="alpha_30">
<div id="text_holder">
    <p>Demo text 3</p>
</div>


<div id="text_holder2">
    <p>Demo text 4</p>


</div>

</div>

</body>
</html>


#文本夹持器{
背景：蓝色；
宽度：500px；
高度：200px；
}
#文本保存器2{
背景：蓝色；
宽度：500px；
高度：200px；
颜色：rgba（255,255,0,1）；
}
#阿尔法30{
不透明度：0.3；
颜色：#ff0000；
}
#阿尔法100{
颜色：#ff0000；
}
演示文本1
演示文本2
演示文本3
演示文本4

您不能

如果使用普通背景色，则“是”将改用rgba

#text_holder {
background:rgba(0, 0, 255,1);
width: 500px;
height: 200px;
}
#text_holder2 {
background: rgba(0, 0, 255,1);;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}

#alpha_30 > div {/* select child */
/*opacity: 0.3;*/
background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}

对于作为背景的图像，您可以使用rgba中的主背景色来模拟不透明度。如果希望背景的不透明度为0.3，则执行1-0.3=0.7以设置rgba不透明度。

这些是解决方法：两者的演示（测试底部的bg图像）：

对父div使用

rgba（225,0,0,3）

堆栈代码段示例：

.不透明{
宽度：500px；
高度：500px；
文本对齐：居中；
颜色：黑色；
背景：rgba（225,0,0,5）；
}

此文本不是不透明的

基本上，您不能覆盖子对象的不透明性。你可能要寻找的答案取决于你实际想做什么。Paulie是对的，不透明度会影响整个元素（包括子元素），并且不能被子元素逆转。你能具体说明你想做什么吗？有一些方法可以解决这个问题。我尝试创建一个背景，应用alpha=.5，然后在背景上放置一些文本，但要在alpha=1处显示文本。我知道我可以用图形创建背景，但我想看看我是否可以用CSS实现同样的效果。使用RGBA而不是不透明度使用背景色/为什么不能像其他属性一样覆盖不透明度？@Lee你不只是喜欢父属性显示：无；如果父项是z-index:1，则内部的任何内容都将被隐藏；除了^parent的任何同级之外，position children的任何值都不会超过z-index:1。级联样式表。第一个单词告诉我们CSS是如何工作的。有一些规则可以重置为子项（边框、颜色、背景等），只要是不依赖于父项布局的特定细节。如果一个家长被设置为半透明，那么它就是整个盒子，包括孩子，否则规则会失去它的第一个含义。

<div class="bg-img">
  <p class="text_holder"> some text</p>
</div>

.bg-img {
  background:url(http://lorempixel.com/100/100/abstract);
}
.bg-img .text_holder {
  background:rgba(255,255,255,0.3);/* here white cause body as white background */
  }