在我们使用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方法我们就不说了，有这么简单有效的方法就没必要去使用其他的了

在我们使用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方法我们就不说了，有这么简单有效的方法就没必要去使用其他的了