div
在文本保持不透明的同时,如何使跨浏览器(包括Internet Explorer 6)的背景透明?
我需要在不使用jQuery等任何库的情况下进行此操作。(但是,如果您知道这样做的库,我很想知道,所以我可以看看他们的代码)。
div
在文本保持不透明的同时,如何使跨浏览器(包括Internet Explorer 6)的背景透明?
我需要在不使用jQuery等任何库的情况下进行此操作。(但是,如果您知道这样做的库,我很想知道,所以我可以看看他们的代码)。
我已经在我的博客Landman Code上创建了这种效果。
我所做的是
#Header {
position: relative;
}
#Header H1 {
font-size: 3em;
color: #00FF00;
margin:0;
padding:0;
}
#Header H2 {
font-size: 1.5em;
color: #FFFF00;
margin:0;
padding:0;
}
#Header .Background {
background: #557700;
filter: alpha(opacity=30);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.3;
zoom: 1;
}
#Header .Background * {
visibility: hidden; // hide the faded text
}
#Header .Foreground {
position: absolute; // position on top of the background div
left: 0;
top: 0;
}
<div id="Header">
<div class="Background">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div class="Foreground">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</div>
重要的是,.Background和.Foreground中的每个填充/边距和内容都必须相同。
感谢@ davy-landmann提供https://stackoverflow.com/a/638064/417153。那就是我想要的!与LESS代码相同的效果:
@searchResultMinHeight = 200px;
.searchResult {
min-height: @searchResultMinHeight;
position: relative;
.innerTrans {
background: white;
.opacity(0.5);
min-height: @searchResultMinHeight;
}
.innerBody {
padding: 0.5em;
position: absolute;
top: 0;
}
}
放宽对在IE6和旧版浏览器上工作的要求,可以使用:: before并显示:inline-block
演示在http://jsfiddle.net/KVyFH/172/
它可以在任何现代浏览器上使用