返回盒子 HI，欢迎来到 Boxbbs
登录 立即注册
苹果cms盒子»论坛 › 综合厅 › 技术交流 › 去除html<img>标签图片破损的默认样式 ...
笨笨冰♡ 中级会员v3| 发表于 2023-4-9 18:52:06 | 显示全部楼层

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
在我们使用img标签引入图片时都会遇到一个问题
如果图片失效会显示浏览器默认的样式极丑，因为这个问题让很多人不喜欢使用img标签而是使用bancground去取代它，今天我分享一个解决方法

1.图片地址为空时将透明度设置为0实现隐藏
  1. img[src=""],img:not([src]){opacity:0}
复制代码
2.隐藏图片里的alt文字
  1. img{overflow:hidden;line-height:0;font-size:0}
复制代码
3.通过伪类给img插入一个背景样式如果图片无法显示便会显示这个覆盖住了默认的样式
  1. img::after {
  2.     content: '';
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     display: block;
  7.     width: 100%;
  8.     height: 100%;
  9.     background-size: cover;
  10.     background-position: center;
  11.     background-repeat: no-repeat;
  12.     background-color: rgb(17,19,25);
  13. }
复制代码

js方法我们就不说了，有这么简单有效的方法就没必要去使用其他的了
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

优质推荐
热门内容

Archiver|手机版|小黑屋|BOXBBS

GMT+8, 2024-12-28 18:40 , Processed in 0.087199 second(s), 21 queries .

Powered by Boxbbs X3.5

© 2023-2033 MacCmsBox bbs.

快速回复 返回顶部 返回列表