Does :before not work on img elements?

后端 未结 12 2267
眼角桃花
眼角桃花 2020-11-22 01:46

I\'m trying to use the :before selector to place an image over another image, but I\'m finding that it simply doesn\'t work to place an image before an im

12条回答
  •  走了就别回头了
    2020-11-22 02:26

    ::after may be used to display the fallback image of an image


    See the example below, first 2 img tags are point to the broken urls. But the second one displays the fallback image instead of the default broken logo from the browser. However, I'm not sure this's any practical, I find it kind of tricky to get it to work right.

    img {
      position: relative;
      display: inline-block;
      width: 300px;
      height: 200px;
      vertical-align: top;
    }
    img:not(:first-child)::after {
      position: absolute;
      left: 0; top: 0; right: 0; bottom: 0;
      content: "<" attr(alt) "> NOT FOUND";
      border: 1px dashed #999;
      background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
    }
    logo
    logo
    logo

提交回复
热议问题