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;