Css 如何使电子邮件上的图像变暗？

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

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

---

如果使用背景线性渐变，它在许多电子邮件应用程序上都非常有效，但是像hotmail这样的一些应用程序不会识别它，因为它使用“速记”（背景：线性渐变（rgba（0，0，0，0，0.5）），rgba（0，0，0，0，0.5）），url（“my_url”）——有没有办法不使用速记？

有两种常见的方法：
1） :

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);
}

---

在Photoshop之类的程序中编辑？我认为CSS可以很好地处理电子邮件，包括过滤器？你说的“过滤器”是什么意思？@amn也许你是对的，我似乎找不到我读到的过滤器有时不起作用的网站。不幸的是，ovokuro不是一个选项——我想使用成千上万的图像，处理它们并不高效——所有的速记都是速记——你不需要使用它们。每个速记都可以使用单独的属性来重写。事实上，不仅Hotmail可能在速记方面存在问题，如果是Hotmail才是罪魁祸首，而不是您查看Hotmail电子邮件的用户代理。我知道有几个用户代理解析速记的方式彼此不同，所以就这样。谢谢。这是一封电子邮件，所以我不认为我可以使用绝对定位-例如，好吧，忘记位置，尝试内部div和相同背景色的宽度和高度100%属性。我认为你想得太多了，@user6122500。在这里，你得到了一个简单有效的CSS规则的答案，该规则的设计目的是在优雅地回退的同时达到你所需要的效果——毕竟，强迫电子邮件收件人看一张柔和的背景图片有什么重要意义？毕竟，这是背景图像。有效负载应该是文本内容。将

过滤器：亮度（50%）

规则放在相关元件上，并希望得到最好的结果。

.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);
}