将文字放入内容栏？

我试图把一些内容放入一个不透明度为0.6的内容栏。我不希望内容（文字，视频等）与内容栏具有相同的不透明度。我尝试将它们放入两个不同的div标签中，其中一个放在另一个标签中，但是当我这样做时，文本不会放在内容栏上。将文字放入内容栏？

希望我解释得不错。

.content { 
 
    color: #ffffff; 
 
    position: relative; 
 
    z-index:1; 
 
} 
 

 
.bg { 
 
    width: 80% 
 
    opacity: .6; 
 
    background-color: #000000; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
}

<div class="content"> 
 
    <p>Hello World!</p> 
 
    <div class="bg"> 
 
    <h1>Hello world!</h1> 
 
    </div> \t 
 
</div>

来源

2016-02-19 Dorian Jones

使用不同的z索引试过？ – HAlexTM

嗨，这里是确切的问题，希望它有帮助！ http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div – Keff

每个人都会建议使用“RGBA”颜色而不是“HEX”，并且如果您使用的背景颜色可以正常工作。

#content { 
 
    background: rgba(0,0,0,0.5); 
 
}

<div id='content'><p>Hello World</p></div>

如果您使用的是彩色图像或其他的东西，那么你将不得不继续与你的两个div，一个接一个的下的做法。与此相关的问题是内容必须有固定的高度才能正确对齐所有内容。

#content, 
 
#bg, 
 
#content p { 
 
    display: block; 
 
    width: 200px; 
 
    height: 30px; 
 
} 
 
#content { 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 
#bg, 
 
#content p { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#bg { 
 
    background: #36f; /* Can be an image */ 
 
    opacity: 0.5; 
 
    z-index: 1; 
 
} 
 
#content p { 
 
    line-height: 30px; 
 
    text-align: center; 
 
    color: black; 
 
    z-index: 2; 
 
    margin: 0; 
 
}

<div id='content'> 
 
    <div id='bg'></div> 
 
    <p>Hello World</p> 
 
</div>

来源

2016-02-19 13:18:09

哦！完美的作品，非常感谢！ –

代替使用HEX颜色代码在.bg类使用RGBA颜色像background-color:rgba(0, 0, 0, 0.6) &除去opacity:0.6的。因为不透明元素下的每个孩子也都变得透明。

来源

2016-02-19 13:07:48 saadeez

你不能以不透明的方式做到这一点，因为所有的子元素都会将父母的不透明度作为基准。你可以做的是使用背景：rgba（）;使父母的背景透明，同时不影响其子女。看到这http://jsbin.com/taxevufaqo/edit?html,css,output

来源

2016-02-19 13:08:34 Joseph

你可以做到这一点，如果文本和BG是在z轴上堆叠的兄弟姐妹。兄弟姐妹的混浊不会相互影响。 –

对，我知道多利安希望父母不透明，但不要孩子。我再次读到这个问题，我不确定是哪一种情况... – Joseph

他没有详细说明哪个物品有不透明性。他只是想在文字背后的不透明，并不希望文字受到影响。 –

是的我已经有这个问题几次，最好的解决办法是这个快速入侵。

background-color:rgba(255,0,0,0.5);

在检查元素中更改255，直到找到所需的颜色。希望有所帮助。

来源

2016-02-19 13:11:22 Beep

将文字放入内容栏？

回答

相关问题