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

}

Answer 2

恕我直言，将文字设为白色并添加投影。

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

Answer 3

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

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

缺点：

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

＆＃13;

＆＃13;

ng-if

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

• 如何使用text / box-shadow？您可以将带有白色或黑色的文字阴影和/或阴影应用于.tag类。这条路 会有足够的对比。

• 另一种方法是，使用相同的图像作为背景图像 标记，并将filter应用于它。 （色调 - 旋转或亮度等）

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

• 最后，也许blend-modes可以选择：mix-blend-mode: difference;