我有一个视频标签,上面显示了一个 div。该 div 非常漂亮并且大部分都可见,只有深色图像有点问题。
为了测试,我搜索了 3 张图片并用我的 div 覆盖它们。
问题是,有人会如何创建这种叠加布局,使其同时隐蔽且清晰可见?
结果如下:
visibility 好!
visibility 差
visibility 好,背景 visibility 差
.container{
position: relative;
}
img{
width: 100%;
height: 100%;
}
.tag{
position: absolute;
bottom: 5px;
right: 0;
color: white;
font-size: 48px;
padding: 5px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color: black;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div class="container">
<img src="https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
<div class="container">
<img src="https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
<div class="container">
<img src="http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
最佳答案
虽然可能更适合 UX.SE,但我可能会提供几个选项。
首先,不要对整个元素使用不透明度,使用透明背景色让白色文本突出。
其次,用白色(或透明的白色)勾勒出黑色(左右)标签将使元素在较暗的背景上更加明显,但不会影响那些颜色较浅的元素。
.tag{
position: absolute;
bottom: 5px;
right: 0;
color: white;
font-size: 48px;
padding: 5px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0px 0px rgba(255,255,255,0.3);
}
关于html - CSS样式化一个透明的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31154569/