使用CSS在缺少alt文本的图像上覆盖颜色

在我的生活中，我试图找到一种简单的方法，当图像缺少alt或alt为空时，将颜色覆盖在图像上。我已经能够得到正确的代码来发现alt是否确实丢失了。如果我加上宽度：50px；我可以让图像改变大小，但我正在寻找彩色叠加。我正在尝试创建一个CSS

我已经看过这里的其他帖子，但它们似乎更多的是关于悬停，而这不是我想要的

---

img[alt=]{width:50px；}

尝试以下方法。这把我最初的答案和s结合起来了。可以利用元素的常用语义语法以及同级元素和伪元素在整个元素上创建覆盖

不幸的是，您必须在 占位符1 占位符2

---

试试下面的方法。这把我最初的答案和s结合起来了。可以利用元素的常用语义语法以及同级元素和伪元素在整个元素上创建覆盖

不幸的是，您必须在 占位符1 占位符2

---

据我所知，你需要两件事来实现你的目标：

的父元素，以便我们可以使用：after添加覆盖。对于这个例子，我将使用figure元素。 用一点Javascript来定位所有的空alt&用您想要的覆盖向其父类添加一个类。 以下是一个例子：

HTML

JS

---

据我所知，你需要两件事来实现你的目标：

的父元素，以便我们可以使用：after添加覆盖。对于这个例子，我将使用figure元素。 用一点Javascript来定位所有的空alt&用您想要的覆盖向其父类添加一个类。 以下是一个例子：

HTML

JS

---

你想实现什么样的颜色覆盖？你不能在IMG上覆盖任何内容，因为：after和：before伪标记在该标记上不可用。也不能选择父选择器。你所能做的就是最终添加一个背景色。要扩展@RokoC.Buljan所说的内容，需要替换元素。不能将伪元素之类的东西用于这些。请参阅。您可以使用一个或多个CSS筛选器。例如：滤光片：对比度175%色调旋转90度深褐色100%亮度90%@j08691我在部分回答中使用了您的评论，因为这可能是影响图像的最佳方式。如果你想让它成为一个答案，让我知道，我可以从我自己的答案中删除它。你想实现什么样的颜色覆盖？你不能在IMG上覆盖任何内容，因为：after和：before伪标记在该标记上不可用。也不能选择父选择器。你所能做的就是最终添加一个背景色。要扩展@RokoC.Buljan所说的内容，需要替换元素。不能将伪元素之类的东西用于这些。请参阅。您可以使用一个或多个CSS筛选器。例如：滤光片：对比度175%色调旋转90度深褐色100%亮度90%@j08691我在部分回答中使用了您的评论，因为这可能是影响图像的最佳方式。如果你想回答这个问题，请告诉我，我可以把它从我自己的答案中删除。非常感谢大家的快速回复。我无法充分表达我的感激之情。这是一个非常智能的解决方案，但请注意，只有在没有alt属性的情况下，它才会起作用。不建议在没有alt属性的情况下保留，这是一个糟糕的HTML实践。非常感谢大家的快速响应。我无法充分表达我的感激之情。这是一个非常智能的解决方案，但请注意，只有在没有alt属性的情况下，它才会起作用。不建议保留一个没有alt属性的，这是一个糟糕的HTML实践。对元素的良好思考，甚至可以提供可访问性。对元素的良好思考，甚至可以提供可访问性。

<figure class="custom-figure">
    <img src="https://via.placeholder.com/200x200" alt="">
</figure>

<figure class="custom-figure">
    <img src="https://via.placeholder.com/200x200" alt="123">
</figure>

.custom-figure{
    display: inline-block;
    margin: 10px;
}

.custom-figure--overlay{
    position: relative;
}
.custom-figure--overlay:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
}

const addOverlayToEmptyAlt = () => {
    const images = document.querySelectorAll(".custom-figure > img");

    for (let each of images) {
        const alt = each.getAttribute("alt").trim();

        if (alt === "") {
            each.closest(".custom-figure").classList.add("custom-figure--overlay");
        }
    }
};

addOverlayToEmptyAlt();