通过css替换img的内容 [英] replace content of img via css

问题描述

我有这个图片标记：

 < img src =http://placehold.it/200x200/ > 
  

我需要通过css替换图片（因为我无法编辑html），所以我使用这个CSS：

  img {
 content：url（'http://lorempixel.com/200/200 ）; 
} 
  

它在Chrome上运行良好，但不能在Firefox中工作，也就是说， ？

解决方案

1）将图片的宽度和高度设置为0.

<$>

2）添加100px的填充p $ p> img {
display：inline-block;
background：url（http://lorempixel.com/200/200）no-repeat; / *< --- * /
width：0; / *< --- * /
height：0; / *< --- * /
padding：100px; / * < - * /
}


  .replace {display：inline-block;背景：url（http://lorempixel.com/200/200）no-repeat;宽度：0;身高：0; padding：100px;}  

< h4> .it：< / h4>< img src =http://placehold.it/200x200/>< hr>< h4>在标记中显示同一图片 - 但是通过CSS< / h4>< img class =replacesrc =http://placehold.it/200x200/>

FIDDLE

这是如何工作的？

好吧，可以说我们在原始img元素中添加了填充：

  img {
 padding：100px; 
背景：粉色; 
} 
  

结果是您的原始图片每边都有100px的粉色背景 p>

现在将width / height设置为0：

  img {
 padding：100px; 
背景：粉色; 
 width：0; height：0; 
} 
  

你得到一个200像素×200像素的粉色区域:(现在你已经消除您的原始图像）

现在将粉红色背景改为新背景

  background：url （http://lorempixel.com/200/200）不重复; 
  

完成了。

I have this image tag:

<img src="http://placehold.it/200x200"/>

I need to replace the image via css (because I can't edit the html),so I use this css:

img {
 content: url('http://lorempixel.com/200/200');
}

it's working well on chrome but not working in firefox and ie,any idea why?

解决方案

1) Set width and height of your image to 0.

2) Add a padding of 100px.

3) Add your new image via a background image

img {
  display: inline-block;
  background: url(http://lorempixel.com/200/200) no-repeat; /* <--- */
  width: 0; /* <--- */
  height: 0; /* <--- */
  padding: 100px; /* <--- */
}

.replace {
  display: inline-block;
  background: url(http://lorempixel.com/200/200) no-repeat;
  width: 0;
  height: 0;
  padding: 100px;
}

<h4>Image from placehold.it:</h4>

<img src="http://placehold.it/200x200"/>

<hr>

<h4>Same image in markup - but replaced via CSS</h4>

<img class="replace" src="http://placehold.it/200x200"/>

FIDDLE

How does this work?

Well, lets say we added padding to your original img element:

img {
    padding:100px;
    background: pink;
}

The result is your original img with 100px of pink background on each side

Now set width/height to 0:

img {
   padding:100px;
   background: pink;
   width:0;height:0;
}

You get a 200px X 200px pink area: (So now you've eliminated your original image)

Now change the pink background to your new background

background: url(http://lorempixel.com/200/200) no-repeat;

and you're done.

这篇关于通过css替换img的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！