通过css替换图片

发布于 2024-07-16 13:52:57 字数 269 浏览 5 评论 0原文

我正在 Stylish（一个 Firefox 插件）中编写代码来更改显示的图像。

image 属性没有 div 标签，所以我必须使用这个：

img[src*="s_dschjungelplanet"]{
##########
}

所以这将替换页面中任何位置的 img src 中的“s_dschjungelplanet”。

所以我的主要问题是我不确定如何告诉它替换 src="xxx"。

回复Ta

原文

I'm writing code in Stylish, a firefox plugin, to change the image that is showing up.

The image property doesn't have a div tag, so I have to use this:

img[src*="s_dschjungelplanet"]{
##########
}

So this will replace "s_dschjungelplanet" anywhere in the page, in a img src.

So my main problem is that I'm not sure HOW to tell it to replace the src="xxx".

Ta for replies

分享到QQ

分享到微博

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

发布评论

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

缺⑴份安定 2024-07-23 13:52:58

没有简单的方法。我认为你最好使用greasemonkey脚本，因为使用一个简单的这样的脚本你可以改变url。

据我所知，你不能只用css来改变url。这是我仅使用 css 所能得到的最接近的结果：

img[src*="s_dschjungelplanet"]{
    width:0;
    height:70px;
    padding-right:250px;
    background:transparent url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) top left no-repeat;
}

There is no easy way. I think you'd be better of with greasemonkey scripts, as with a simple such script you can change the url.

As far as I know, you can not change the url with css only. This was the closest I was able to come with css only:

img[src*="s_dschjungelplanet"]{
    width:0;
    height:70px;
    padding-right:250px;
    background:transparent url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) top left no-repeat;
}

回复收藏 0 原文

甜警司 2024-07-23 13:52:58

你可以试试这个：

img[src*="s_dschjungelplanet"]{
内容： url("我的最爱.png");
在 Chrome 中有效

，在 Firefox 中无效...

回复收藏 0 原文

千里故人稀 2024-07-23 13:52:58

img[src*="http://url-of-image-to-be-replaced.jpg"]{
    background-image: url("https://url-of-image-you-want-to-display.jpg");
    width:38px;
    display:inline-block;
    padding:38px 0 0 0;
    height: 0px}

根据您的规格更改宽度和填充。这对我有用。

img[src*="http://url-of-image-to-be-replaced.jpg"]{
    background-image: url("https://url-of-image-you-want-to-display.jpg");
    width:38px;
    display:inline-block;
    padding:38px 0 0 0;
    height: 0px}

Change the width and padding to your specs. It's worked for me.

回复收藏 0 原文

守护在此方 2024-07-23 13:52:58

替换img源

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
    no-repeat;
  width: 180px;
  height: 236px;
  padding-left: 180px;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>

replace the img src

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
    no-repeat;
  width: 180px;
  height: 236px;
  padding-left: 180px;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>

回复收藏 0 原文

~没有更多了~