不透明的背景,但没有不透明度文本
问题描述:
我有我的网站上这张照片,看起来像这样:不透明的背景,但没有不透明度文本
现在我不希望文字具有不透明性,我该怎么做呢?
.hero_content h1 {
color: #011f4b;
font-weight: 700;
font-size: 45px;
}
.hero_content h2 {
color: #000;
font-weight: 700;
font-size: 20px;
margin-top: 0;
width: 50%;
line-height: 1px;
}
div.transbox {
padding-bottom: 20px;
padding-top: 1px;
padding-left: 100px;
background-color: #ffffff;
border: 0px solid black;
opacity: 0.3;
margin-top: 170px;
margin-left: -110px;
width: 1360px;
}
<div class="transbox">
<h1>TeamSpan Global Solutions</h1>
<h2>Your partner in building satellite workforce teams</h2>
</div>
答
NVM,想通了。在transbox的
背景颜色应该是:
background-color: rgba(255, 255, 255, 0.3);
答
如果使用opacity
的含div
,这会影响它的所有孩子。 你要专门针对封闭div
,所以使用rgba
格式是这样的:
background-color: rgba(255, 255, 255, 0.6);
而对于h2
内: color:rgb(0,0,0);
如果由于某种原因,你必须使用不透明度封闭div
,并不影响孩子,请使用伪造类:after
这样的:
.transbox:after{
content:"";
position:absolute;
width:600px;
height:600px;
opacity:0.3;
top:0;
left:0;
background-color:white;
}
使用'rg ba'背景的颜色。 – Xufox
从transbox删除不透明 – krishnar
@krishnar然后它删除箱子的不透明度,我希望箱子的不透明度保留但不包含文本 –