通過背景圖片和文字實現正確的對比度/漸變

Question

我真的很喜歡帶有文字疊加的清晰背景圖片。但是，當我做這些事情時，我總是發現文字被背景圖片淹沒了。所以我一直在尋找正確的解決方案或行業標準來使用這種背景 - >文字技術。

從Adobe觀看此圖像時，背景圖像比實際圖像顯得更暗。使用檢查元素我看不到是什麼造成了這一點 - 沒有不透明度或漸變。他們用什麼技術來使這個變暗，以及在這種情況下應該使用什麼技術？

http://www.adobe.com/uk/products/experience-design.html

Answer 1

快速查看元素的CSS，這裏是你的答案：

.hero2-fx-frame-2[class*="hero2-theme-1"]::after { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.95), transparent 53%), linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent 53%); 
} 

這基本上是一個黑色層的不透明度爲53％。

Answer 2

使用獨立的div。不要將文本div嵌套在圖像div中。然後在兩個div上測試不同的漸變直到你找到你想要的東西。