将内部div不透明度设置为1,但不起作用 [英] Setting inner div opacity to 1, but not effected
问题描述
我有一个带有背景图像和背景颜色的div.我将这个div的透明度设为0.7.在那之后,我在该div内做了一个内部div,但是我不想让这个不透明.
i have a div with a backround image and also background color. I made the opacity of this div 0.7. After that, i made an inner div inside of this div, but i dont want to give opacity to this one.
这是我的CSS代码:
#outer{
position:relative;
box-shadow: 10px 10px 5px #888888;
border-radius: 25px;
opacity: 0.7;
border-style:inset;
border-width: 2px;
margin:auto;
width: 1000px;
height:inherit;
background-color: rgba(255, 255, 255, 0.4);
background-image:url(../Content/Images/Logo.png);
background-size: 770px 680px;
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
background-position: center;
}
#inner{
position: absolute;
opacity: 1;
background-color: red;
width: 100px;
height: 100px;
}
它不起作用,内部div也受外部div的不透明度影响.我该怎么办?
Its not working, the inner div is also effected by the opacity of the outer div. How can i do that?
推荐答案
当然可以.您的父级的不透明度为0.7,因此内部的每个元素都会看到 opacity:1
等于父级的不透明度.
Of course. Your parent has an opacity of 0.7, so every element inside will see opacity: 1
being equal to the opacity of the parent.
#outer, #inner {
height: 100px;
padding: 20px;
width: 100px;
}
#outer {
background: #000;
opacity: 0.7;
}
#inner {
background: #f00;
opacity: 1.0;
}
<div id="outer">
<div id="inner"></div>
</div>
要解决此问题,请将 #inner
元素移到 #outer
元素之外,然后将其放置在 #outer
元素的顶部
To get around this, move your #inner
element outside of your #outer
element and position it on top of the #outer
element.
#wrapper {
position: relative;
}
#outer, #inner {
height: 100px;
padding: 20px;
width: 100px;
}
#outer {
background: #000;
opacity: 0.7;
}
#inner {
background: #f00;
position: absolute;
top: 20px; /* These values are based on the padding to offset correctly. */
left: 20px;
}
<div id="wrapper">
<div id="outer"></div>
<div id="inner"></div>
</div>
显然,在这种情况下,您可能想将 #inner
和 #outer
重命名为更相关的名称.
Obviously you'd probably want to rename #inner
and #outer
to something more relevant in this situation.
这篇关于将内部div不透明度设置为1,但不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!