使用css替换图像（在< img />标记中） [英] Replacing an image (in an <img /> tag) using css

问题描述

我有以下html：

 < div class =A> 
< img src =image1.pngwidth =100pxheight =100px/> 
< / div> 
  

在我的媒体查询css样式表中，我想用另一个替换该图像png）

我需要编写的CSS代码是什么？

我尝试了以下操作：

  .A img 
 {
 background：url（image2.png）no-repeat; 
} 
  

但这看起来不正确吗？

解决方案

不能在CSS中修改，而是使用如下的div：

 < div id ='＃theImage'>< / div> 
  

然后在CSS中：

  #theImage {
 width：100px; 
 height：100px; 
 background：url（image1.png）no-repeat; 
} 
  

然后，您可以使用媒体查询重新设置div。

I have the following html:

<div class="A">
    <img src="image1.png" width="100px" height="100px"/> 
</div>

In my media queries css style sheet, I would like to replace that image with another one (image2.png).

What is the css code I need to write?

I tried the following:

.A img
{
   background:url("image2.png") no-repeat;
}

But this doesn't seem correct?

解决方案

You can't modify that in CSS, instead, use a div like this:

<div id='#theImage'></div>

Then in CSS:

#theImage {
    width:100px;
    height:100px;
    background:url("image1.png") no-repeat;
}

Then you can restyle the div using a media query.

这篇关于使用css替换图像（在< img />标记中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！