使用 css 替换图像(在 <img/> 标签中)

问题描述

我有以下 html:

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

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

我需要写什么css代码?

我尝试了以下方法:

.A img{背景:网址(image2.png")不重复；}

但这似乎不正确?

解决方案

你不能在 CSS 中修改它，而是使用这样的 div:

然后在 CSS 中:

#theImage {宽度:100px；高度:100px；背景:网址(image1.png")不重复；}

然后您可以使用媒体查询重新设置 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/> 标签中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！