替换<；img src>；通过纯CSS

首先，提前谢谢你，我已经想了好几个小时了，但我就是想不出来

我没有访问后端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>

---

否，您不能通过CSS更改

src

属性，因为

src

属性是一个HTML属性，超出了CSS样式的范围。但是：

背景图像 如果您想要一个纯CSS解决方案，那么您可以放置

div

s而不是

img

，可能会将

div

s包裹在锚点周围

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

---

不可以，您不能通过CSS更改

src

属性，因为

src

属性是一个HTML属性，超出了CSS样式的范围。但是：

背景图像 如果您想要一个纯CSS解决方案，那么您可以放置

div

s而不是

img

，可能会将

div

s包裹在锚点周围

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

---

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

img{位置：相对；显示：块；宽度：350px；高度：150px；}
img:在{
内容：''；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
背景尺寸：封面；
背景重复：无重复；
背景图像：url（'https://via.placeholder.com/350x150' )
}

---

您可以在图像之后添加伪元素。我知道有几个地方不允许使用psuedo元素（比如表单元素），但在图像或包装它们的链接上，可以使用如下内容

img{位置：相对；显示：块；宽度：350px；高度：150px；}
img:在{
内容：''；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
背景尺寸：封面；
背景重复：无重复；
背景图像：url（'https://via.placeholder.com/350x150' )
}

---

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

img[src*=“image1.png”]{
内容：网址(https://picsum.photos/id/10/200/300);
}
img[src*=“image2.png”]{
内容：网址(https://picsum.photos/id/15/250/400);
}

---

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

img[src*=“image1.png”]{
内容：网址(https://picsum.photos/id/10/200/300);
}
img[src*=“image2.png”]{
内容：网址(https://picsum.photos/id/15/250/400);
}

你能详细说明一下吗，比如你想在哪里做这件事？它在你的浏览器中吗？你到底希望结果是什么？等等，它在一个网站上建立了一行图标，我想把图标改成更现代的东西，但我只能通过推送，也许也可以通过tampermonkey访问JS。你在浏览器的开发工具（f12）中尝试过inspect元素方法吗然后用这种方式替换图片URL？是的，我可以用这种方式编辑它们，但我需要在CSS中理想地使用它，这样它就可以传递给其他人。你能用更多的细节澄清一下吗，比如你想在哪里做这件事？它在你的浏览器中吗？你到底希望结果是什么？等等，它在一个网站上建立了一行图标，我想把图标改成更现代的东西，但我只能通过推送，也许也可以通过tampermonkey访问JS。你在浏览器的开发工具（f12）中尝试过inspect元素方法吗然后用这种方式替换图片URL？是的，我可以用这种方式编辑它们，但我需要在CSS中理想地使用它，这样它就可以传递给其他人。看起来它可以实现我想要做的，总共有6个，所有的图像都有自己的图像，那么我如何在CSS中区分它们，为每个图像添加一个新的源URL。@MrWhite如果你想为每个特定的图像更改它们，你可以使用属性选择器，例如：

img[src=“/example/1/image1.png”]

，或者你可以使用

：nth-child（）指定一个特定的索引

selector根据索引选择特定图像这看起来可以实现我的目标，总共有6个，都有自己的图像，但是我如何在CSS中区分它们，为每个添加新的源URL..@MrWhite如果你想为每个特定图像更改它们，你可以使用属性选择器，例如：

img[src=“/example/1/image1.png”]

或者您可以使用

：nth-child（）

选择器指定特定的索引，以根据其索引选择特定的图像