如何使EMAIL上的图像变暗？

Question

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

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

如果使用背景线性渐变，它在许多电子邮件应用程序中都很有效，但有些像hotmail一样，因为它使用了“速记”而无法识别它。 （背景：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（＆＃39; my_url＆＃39;）） - 有没有办法不使用这个简写？

Answer 1

有两种常见方式：
1）using 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);
}