What do you do when img blocks background?

set up an animation animation, add a warning to the background icon, without a picture, (img) is all right, after adding the picture, the picture covers the warning icon (background)

.list
    height 100%
    float left
    width 83%
    padding-left 2%
    .wrap
        overflow hidden
        .cont
            height 90px
            overflow-x auto
            overflow-y hidden 
            position relative
            .suspectList
                padding-top 2px
                li
                    animation mymove 1s infinite
                .stopBlink
                    animation none
            .similarityList,.suspectList
                padding-left 5px
                left 0px
                top 0px
                position absolute
                height 84px
                overflow-x auto 
                white-space nowrap
                display flex 
                li
                    border 3px solid red
                    height 76px
                    width 64px
                    display inline-block
                    float left
                    font-size 13px
                    text-decoration none
                    margin 0 6px 0 0
                    img
                        height 77px
                        width 64px
            .similarityList 
                li
                    border 3px solid transparent
                    position relative
                .repeat
                    color white
                    position absolute
                    top -3px
                    right -4px
                    font-size 12px
                    height 18px
                    width 18px
                    text-align center
                    background red
                    border-radius 50%
                    font-style normal
                    font-weight bold
                    
@keyframes mymove
{
    from {
        border-color -sharp1d2029
        background none
        background-position bottom right 
    }
    to {
        border-color red
        background url("../../../assets/icon/warning_s.png") no-repeat
        background-position bottom right 
    }
}
<div class="list">
    <div class="wrap">
        <div class="cont">
            <ul class="suspectList">
                <li v-for="(item,index) in abnormalArr" :class="{"stopBlink":item.isBlink}" :key="index" @click="abnormalArrShow(index)">
                    <!-- <img :src="system_picUrl + item.imageAddress"> -->
                </li>
            </ul>
        </div>
    </div>
</div>

requirements: warn icon (background) that you can flash on the picture (img)


just take the icon warning "warning" as the pseudo element of li and absolutely locate it

li {
  position: relative;
}
li:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  animation: mymove 1s infinite;
}
li.stopBlink:after {
  animation: none;
}

content will definitely obscure the background. It can be changed to position

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e70427-2c4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e70427-2c4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?