无需伪元素与包裹元素实现网页图片双色调效果的方案问询

要在不额外添加HTML包裹容器或CSS伪元素的前提下给网站所有图片做双色调，直接用img元素的CSS滤镜或混合模式就能搞定，完全保持HTML结构简洁：

方案一：滤镜组合（推荐，兼容性好） #

通过叠加多个滤镜属性，精准控制双色调效果：

img {
  /* 第一步：转灰度消除原图色彩 */
  filter: grayscale(100%)
    /* 第二步：添加棕褐色基础调 */
    sepia(100%)
    /* 第三步：旋转色相调整主色调（示例为红色调，可自行修改度数） */
    hue-rotate(330deg)
    /* 第四步：提高饱和度让色彩更浓郁 */
    saturate(200%);
}

你可以修改hue-rotate的数值来切换不同主色调：比如180deg对应青色调，90deg对应绿色调，0deg保持棕褐色。

方案二：混合模式+背景色（色彩更可控） #

如果需要指定具体的颜色值，用混合模式配合背景色：

img {
  filter: grayscale(100%);
  /* 设置你想要的双色调主色 */
  background-color: #e63946;
  /* 用screen混合模式实现色调叠加 */
  mix-blend-mode: screen;
}

注意：这种方式下如果图片有透明区域，背景色会显示出来，适合不透明的图片使用。

两种方案都不需要额外的HTML结构，直接给所有img元素加样式即可，比你之前的包裹元素方案更简洁。

内容的提问来源于stack exchange，提问作者Colby