通过纯 CSS 替换 <img src>

Question

首先，提前感谢，我已经试图解决这个问题几个小时了，但我无法解决。

我无法访问后端PHP/HTML，但我想在网站设计中更改一些图像。

如何仅通过纯CSS更改这些图像？这可能吗？

<a href="example.php?action=task1" class="tooltip" title="task1">
<img src="/example/1/image1.png" alt="RP"></a>
<a href="example.php?action=task2" class="tooltip" title="task2">
<img src="/example/1/image2.png" alt="RP"></a>

Answer 1

不可以，您不能通过 CSS 更改src属性，因为src属性是 HTML 属性，超出了 CSS 样式的范围。但：

背景图像

如果你想要一个纯CSS解决方案，那么你可以放置divs而不是img，可能会将div包裹在锚点周围。

<div style="width: 100px; height: 100px; background-image: /example/1/image1.png;"><a href="example.php?action=task1" class="tooltip" title="task1"></div>

请参阅此处的示例：https://www.w3schools.com/cssref/pr_background-image.asp

我知道您无权访问HTML开发，但是如果您可以访问，那么值得知道它可以通过这种方式解决。

爪哇语

使用Javascript，你可以轻松地看到类似的东西：

var images = document.getElementsByTagName("img");
for (let image of images) {
//Do something with image.src
}

Answer 2

您可以在图像后添加一个伪元素。我知道有几个地方不允许使用伪元素(例如在表单元素上(，但是在图像或包装它们的链接上，您可以使用如下所示的内容

img { position: relative; display: block; width: 350px; height: 150px;  }
img:after { 
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-size: cover;
background-repeat: no-repeat;
background-image: url( 'https://via.placeholder.com/350x150' )
}

<img src="/example/1/image1.png" alt="RP">

要记住的最重要的事情(至少对我而言(是:before和:after伪元素所需的content属性

Answer 3

您可以使用应用于图像的内容和属性选择器来识别每个图像：

img[src*="image1.png"] {
content:url(https://picsum.photos/id/10/200/300);
}
img[src*="image2.png"] {
content:url(https://picsum.photos/id/15/250/400);
}

<a href="example.php?action=task1" class="tooltip" title="task1">
<img src="/example/1/image1.png" alt="RP"></a>
<a href="example.php?action=task2" class="tooltip" title="task2">
<img src="/example/1/image2.png" alt="RP"></a>