html - CSS样式化一个透明的div

Question

我有一个视频标签，上面显示了一个 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>

Answer 1

虽然可能更适合 UX.SE，但我可能会提供几个选项。

首先，不要对整个元素使用不透明度，使用透明背景色让白色文本突出。

其次，用白色(或透明的白色)勾勒出黑色(左右)标签将使元素在较暗的背景上更加明显，但不会影响那些颜色较浅的元素。

JSfiddle Demo

.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); 

}