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

#CSS 修改Img标签中的图片(src)| 来源: 网络整理| 查看: 265

在开发的过程中遇到了一个比较特别的问题，需要使用 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，插入一个一个正方形的图案，将背景和边框都设置为透明，右键图案->另存为图片就可以了

【本文地址】

今日新闻