CSS造型透明div

Question

我有一个顶部显示div的视频标签。 在大多数情况下，div非常漂亮且可见，只有暗图像有点问题。

为了测试我搜索了3张图片并用我的div重叠了它们。

问题是，有人会如何创建这种叠加布局，因此它可以同时清晰可见？

结果如下：

能见度不错！

可见性不好

可见性好，背景能见度差

---

 .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，但我可能提供了几种选择。

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

其次，概述白色（或透明白色）的黑色（ish）标签将允许元素在较暗的背景上更明显，但不会影响那些颜色较浅的元素。

JSfiddle演示

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

}

Answer 2

恕我直言，使文本白色，并添加一个投影。

.tag {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.75)
}

Answer 3

显然你担心一个硬编码的背景颜色不适合所有黑暗，中性和浅色背景。

有一个相对较新的CSS属性叫做background-blend-mode ，它控制两个背景如何相互混合。 您可以使用此属性指定在所有情况下都会产生一些对比度的混合模式 。

缺点：

• 图像和叠加都必须是元素背景的一部分（ mix-blend-mode是更好的选择，支持较少）
• 必须在状态上选择叠加颜色。 在下面的例子中，我使用透明白色而不是透明黑色，因为差异滤镜不会影响黑色。

 .photo { position: relative; height: 200px; background-blend-mode: difference, normal; } .photo span { position: absolute; left: 0; right: 0; bottom: 0; font: bold larger/50px sans-serif; color: rgba(255, 255, 255, 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .photo-1 { background: linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px, url(https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg) center / cover; } .photo-2 { background: linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px, url(https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg) center / cover; } .photo-3 { background: linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px, url(http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg) center / cover; } 

 <div class="photo photo-1"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="photo photo-2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="photo photo-3"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> 

Answer 4

• 那么使用text / box-shadow呢？ 您可以将带有白色或黑色的文本阴影和/或阴影应用于.tag类。 这样就会有足够的对比度。

• 另一种方法是，在标签上使用相同的图像作为背景图像，并对其应用滤镜 。 （色调 - 旋转或亮度等）

• 我想到的其他东西是使用画布计算，检测底角是暗还是亮，并在.tag中添加另一个类，这样就可以使用两个版本。 每种类型的背景一个

• 最后， 混合模式可能是一种选择： mix-blend-mode: difference;