img遮挡住了background怎么处理?

设置了一个animation动画,背景加入了一个警告icon,没加图片(img)是一切正常,加入图片之后,图片覆盖住了警告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 #1d2029
        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>

图片描述

图片描述

需求:警告icon(background)可以在图片(img)上闪烁

阅读 5.2k
2 个回答

把警告⚠️的icon作为li的伪元素绝对定位不就行了

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;
}

内容肯定会遮挡住背景的,可以改成定位

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题