How to hide image broken Icon using only CSS/HTML?

前端 未结 17 1806
不思量自难忘°
不思量自难忘° 2020-11-27 09:14

How can I hide the broken image icon? Example: \"Example\"

I have an image with error src:

17条回答
  •  臣服心动
    2020-11-27 09:39

    Found a great solution at https://bitsofco.de/styling-broken-images/

    img {  
      position: relative;
    }
    
    /* style this to fit your needs */
    /* and remove [alt] to apply to all images*/
    img[alt]:after {  
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      font-family: 'Helvetica';
      font-weight: 300;
      line-height: 2;  
      text-align: center;
      content: attr(alt);
    }
    
    
    A broken image
    A bird

提交回复
热议问题