使用 CSS 在缺少替代文本的图像上叠加颜色

Question

对于我的生活，我试图找到一种简单的方法，当缺少 alt 或 alt 为空时，将颜色覆盖在图像上。 我已经能够获得正确的代码来发现是否确实缺少 alt。 如果我放一些类似 width: 50px; 的东西。 我可以让图像改变大小，但我正在寻找颜色叠加。 我正在尝试将其创建为 CSS。

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

img[alt=""] {width: 50px;}

Answer 1

尝试类似以下内容。 它将我的初始答案与PossessWithin相结合。 您可以利用<figure/>元素的常用语义语法以及同级和伪元素在整个<figure/>上创建覆盖。

不幸的是，您必须在<img>周围添加额外的标记才能使其工作，因为回答这样的事情（使用伪:after元素）对<img>不起作用。 请参阅:before 不适用于 img 元素吗？

 .container { position: relative; } img:not([alt])+.label::after { content: "missing alt"; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255, 0, 0, 0.2); }

 <figure class="container"> <img src="https://via.placeholder.com/150" width="150" height="150"> <figcaption class="label">Placeholder 1</figcaption> </figure> <figure class="container"> <img alt="Placeholder" src="https://via.placeholder.com/150" width="150" height="150"> <figcaption class="label">Placeholder 2</figcaption> </figure>

---

您也可以按照j08691 的建议尝试使用过滤器。

您可以使用一个或多个 CSS 过滤器。 例如filter: contrast(175%) hue-rotate(90deg) sepia(100%) brightness(90%) ；

 img:not([alt]) { filter: opacity(25%); }

 <img src="https://via.placeholder.com/150" width="150" height="150"> <img alt="Placeholder" src="https://via.placeholder.com/150" width="150" height="150">

Answer 2

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

1. <img />父元素，因此我们可以使用:after添加叠加层。 在这个例子中，我将使用figure元素。
2. 一点点的 Javascript 来定位所有空的 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>

CSS

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

JS

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

Codepen 上的实时示例