我有一个带有背景图像和背景颜色的 div。我把这个div的不透明度设置为0.7。之后,我在这个 div 内部创建了一个内部 div,但我不想给这个 div 带来不透明度。
这是我的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 的不透明度的影响。我怎样才能做到这一点?
当然。你的父级的不透明度为 0.7,所以里面的每个元素都会看到opacity: 1
等于父级的不透明度。
#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
元素。
#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
and #outer
与这种情况更相关的事情。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)