如何在电子邮件上使图像变暗?

Question

使用 CSS 使电子邮件中的背景图像变暗的最佳方法是什么？ 例如，我知道通常您可以使用过滤器等，但我不确定它是否适用于所有电子邮件提供商

如果使用过滤器，这会使包括"覆盖"在内的整个电子邮件变暗，并且由于绝对定位不合适，因此不是一个好的解决方案

如果使用背景线性渐变，它在许多电子邮件应用程序上效果很好，但像hotmail这样的应用程序不会识别它，因为它使用"速记"(background：linear-gradient(rgba(0， 0， 0， 0.5(，rgba(0， 0， 0， 0.5((， url('my_url'(( - 有没有办法不使用速记？

Answer 1

有两种常见的方法：
1(使用CSS3：

.yourBackgroundImage {
//halve image brightness
filter:brightness(50%);
}

2( 使用叠加：

.yourBackgroundImage {
position: relative;
}
//yourBackgroundImageOverlay is a div inside youBackgroundImage
.yourBackgroundImageOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// control overlay alpha by tweaking .5 in background color
background-color: rgba(0, 0, 0, .5);
}