请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
世上人间 发表于 2021-1-2 19:01:13 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
在开发的过程中遇到了一个比力特别的问题,需要使用 CSS修改Img中的图片。
content

那最先通过搜索找到的办理方案是使用 Content 样式
  1. /*图片替换*/img {    content: url(../Img/Logo.png);}
复制代码
这个方案在Chrome中显示正常,但是IE不支持
 
background-image

那我又实验使用background-image样式
  1. /*图片替换*/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,插入一个一个正方形的图案,将配景和边框都设置为透明,右键图案->另存为图片  就可以了
 
 
 

来源:https://blog.csdn.net/xy596356456/article/details/112004996
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )