如何使 EMAIL 上的图像变暗？答案

【问题标题】：How to darken image on EMAIL?如何使 EMAIL 上的图像变暗？
【发布时间】：2017-12-27 08:47:59
【问题描述】：

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

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

如果使用背景线性渐变，它适用于许多电子邮件应用程序，但有些像 hotmail 无法识别它，因为它使用“速记”（背景：线性渐变（rgba（0,0,0,0.5）， rgba(0, 0, 0, 0.5)), url('my_url')) - 有没有办法不使用速记？

【问题讨论】：

在 Photoshop 之类的程序中编辑？
我认为 CSS 可以很好地处理电子邮件，包括过滤器？ “过滤器”是指w3.org/TR/filter-effects/#FilterProperty？
@amn 也许你是对的，我似乎找不到那个我读到过滤器有时不起作用的网站。 ovokuro 不幸的是不是一个选项 - 我想使用数千张图像，但处理它们效率不高
速记是速记——你不需要使用它们。每个速记都可以改用单独的属性来重写。事实上，不仅Hotmail 可能存在速记问题，如果罪魁祸首是Hotmail 而不是您正在查看Hotmail 电子邮件的用户代理。我知道几个用户代理解析速记的方式彼此不同，所以就在那里。

标签： css

【解决方案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);
}

【讨论】：

谢谢。这是一封电子邮件，所以我认为我不能使用绝对定位 - 例如 stackoverflow.com/questions/3403205/…
好吧，忘记位置，尝试内部 div 和相同背景颜色的宽度和高度 100% 属性。
我认为你想多了，@user6122500。在这里，您将得到一个有效的、简单的 CSS 规则的答案，该规则旨在准确地实现您需要的效果，同时优雅地回退——毕竟，强制电子邮件的收件人查看一个低调的邮件是最重要的背景图像？毕竟是背景图像。有效负载应该是文本内容。将filter: brightness(50%) 规则放在相关元素上，希望最好。