Html CSS设置透明div的样式

我有一个视频标签，上面显示一个div。div非常好看，大部分都是可见的，只有深色的图像有点问题

为了测试，我搜索了3张图片，并将它们与我的div叠加

问题是，人们将如何创建这个覆盖布局，使其同时谨慎且清晰可见？ 结果如下：

能见度好

能见度差

能见度正常，背景能见度不好

---

.container{
位置：相对位置；
}
img{
宽度：100%；
身高：100%；
}
.标签{
位置：绝对位置；
底部：5px；
右：0；
颜色：白色；
字体大小：48px；
填充物：5px；
-webkit边框左上半径：20px；
-左上角moz边界半径：20px；
边框左上半径：20px；
背景色：黑色；
不透明度：0.4；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
}

你好标签
你好标签
你好标签

虽然可能更适合UX.SE，但我可能会提供一些选项

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

第二，用白色（或透明白色）勾勒出黑色（ish）标记将使元素在较暗的背景上更可见，但不会影响较浅颜色的元素

---

IMHO，将文本设置为白色并添加阴影

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

• 如何使用文本/框阴影？您可以对.tag类应用白色或黑色的文本阴影，或框阴影。这边 会有足够的对比度

• 另一种方法是，在屏幕上使用与背景图像相同的图像 标记，并应用于它。（色调或亮度等）

• 我想到的另一件事是使用 画布，用于检测底角是暗的还是亮的，以及 将另一个类添加到.tag，以便可以使用两个版本。 每种背景各一个

• 最后可能是一个选项：

  混合模式：差异

---

显然，您担心一种硬编码的背景色不适合所有深色、中性和浅色背景

有一个相对较新的CSS属性称为，它控制两个背景如何相互混合。可以使用此属性指定在所有情况下都能产生一定对比度的

缺点：

• 图像和覆盖都必须是元素背景的一部分（支持较少，是更好的选择）
• 必须有条理地选择覆盖颜色。在下面的示例中，我使用了透明白色而不是透明黑色，因为差异过滤器不会影响黑色

.photo{
位置：相对位置；
高度：200px；
背景混合模式：差异，正常；
}
.照片跨度{
位置：绝对位置；
左：0；
右：0；
底部：0；
字体：粗体较大/50px无衬线；
颜色：rgba（255，255，255，1）；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.照片-1{
背景：
线性渐变（向右，rgba（255，255，255，.4），rgba（255，255，255，.4））无重复底部/100%50px，
网址(https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg)中心/盖；
}
.照片-2{
背景：
线性渐变（向右，rgba（255，255，255，.4），rgba（255，255，255，.4））无重复底部/100%50px，
网址(https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg)中心/盖；
}
.照片-3{
背景：
线性渐变（向右，rgba（255，255，255，.4），rgba（255，255，255，.4））无重复底部/100%50px，
网址(http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg)中心/盖；
}

Lorem ipsum door sit amet，一位杰出的领导者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet，是一位杰出的献身者。

比其他句子大得多的一句话，难道你不只是让.tag变得不那么透明吗？使用白色背景和黑色字母，不要不透明。首先，不要使用

不透明。使用部分透明的rgba-
背景色：rgba（0,0,0,0.4）更复杂的方法是使用HTML5画布和混合模式；并使用适当的混合模式（我猜是差异过滤器）绘制图像和覆盖。
.tag {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.75)
}