使用背景图像实现正确的对比度/渐变。文本

Question

我非常喜欢带有文字叠加层的清晰背景图像。但是，当我这样做时，我似乎总是发现文本被背景图像淹没了。因此，我一直在寻找使用此背景的正确解决方案或行业标准 - ＆gt;文本技术。

从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上测试不同的渐变，直到找到你想要的东西。