通过背景图片和文字实现正确的对比度/渐变

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