CSS 修改Img标签中的图片(src)

在开发的过程中遇到了一个比较特别的问题，需要使用 CSS修改Img中的图片。

content

那最先通过搜索找到的解决方案是使用 Content 样式

/*图片替换*/
img {
    content: url(../Img/Logo.png);
}

这个方案在Chrome中显示正常，但是IE不支持

 

background-image

那我又尝试使用background-image样式

/*图片替换*/
img {
    width: 155px;
    height: 53px;
    background-image: url(../Img/Logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

注意设置background-image后删除src中的图片会导致img标签没有长宽，所以需要根据背景图片设置长宽，如果图片和Img长宽不一致,根据需求还可设置拉伸和平铺的样式

不出意外，被前景挡住了。

我们把Img标签中的 src、alt属性删除，此时IE显示正常，但Chrome会显示一个带边框的破图。

那我们把前景图片设置为透明图片如何？经测试表现效果良好！

所以当前的解决方案是 Img标签上设置一个透明的图片，然后用 background-image样式替换背景图片，实现上述需求

 

小技巧：

没有PS如何制作透明图片

可以使用PowerPoint，插入一个一个正方形的图案，将背景和边框都设置为透明，右键图案->另存为图片  就可以了