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

Question

For the life of me I am trying to find a simple way to overlay a color over an image when it is missing an alt or the alt is empty. I have been able to get the code right for discovering if the alt is indeed missing. If I put something like width: 50px; I can get the image to change size, but I am looking for the color overlay. I am trying to create this as a CSS.

I have looked at other posts on here but they seem more about hovering and that is not what I am looking for.

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

Answer 1

Try something like the following. Which combines my initial answer with PossessWithin 's. You can leverage the usual semantic syntax of a <figure/> element along with the sibling and pseudo elements to create an overlay over the entire <figure/> .

Unfortunately, you have to have additional markup around the <img> to get it to work since the go to answer for something like this (using a pseudo :after element) won't work for <img> . See Does :before not work on img elements?

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

---

You could also try a filter as suggested by j08691 .

You can use one or more CSS filters. Eg 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

As far as I'm aware of, you'll need two things to achieve what you're looking for:

1. A parent element for <img /> so we can add an overlay using :after . For this example I will use the figure element.
2. A little bit of Javascript to locate all the empty alts & add a class to its parent with the overlay you want.

Here is an example:

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

Live example on Codepen