在打印时显示图像alt文本

发布于 2025-01-29 04:17:56 字数 181 浏览 3 评论 0原文

我想在打印网页时显示图像alt文本而不是图像。我尝试了此操作，但它不起作用，可能是因为IMG没有关闭标签，因此伪元素不适用于IMG。有办法这样做吗？

@media print {
       img::after {
       content: "attr(alt)";
       }
}

原文

I would like to display image alt text instead of image when printing the webpage. I tried this but it doesn't work, probably because img doesn't have a closing tag so the pseudo-elements doesn't work with img. Is there a way to do this?

@media print {
       img::after {
       content: "attr(alt)";
       }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

_畞蕅 2025-02-05 04:17:56

您的代码无法正常工作，因为您将:: after分配给img。

img不能生孩子。因此，您无法将其设置为::之后::在之前。

您可以做到这一点：

index.html：

<div data-alt="some-text-in-here">
    <img src="url" alt="some-text-in-here">
</div>

style.css：

@media print {
    div {
        position: relative;
    }

    div::after {
        content: attr(data-alt);

        position: absolute;
        top: 0;
        left: 0;
        /* more styles */
     }

}

Your code is not working because you are assigning ::after to img.

img can't have a child. So you can not set ::after ::before to it.

you can do this:

index.html:

<div data-alt="some-text-in-here">
    <img src="url" alt="some-text-in-here">
</div>

style.css:

@media print {
    div {
        position: relative;
    }

    div::after {
        content: attr(data-alt);

        position: absolute;
        top: 0;
        left: 0;
        /* more styles */
     }

}

回复收藏 0 原文

~没有更多了~