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