美文网首页
vue显示图片的一部分

vue显示图片的一部分

作者: 秀萝卜 | 来源:发表于2021-12-30 11:53 被阅读0次

    这就要使用background:url()了,具体可以看我之前的一篇文章:https://www.jianshu.com/p/337d849077c9

    background:url(....)
    background-position:xx xx
    background-size:xx xx
    background-repeat:no-repeat
    但是在style中必须写成一个,否则不起作用。
    所以使用简写格式:
    background:url(...) no-repeat  0 0px / auto 28px
    左边的0 0px是图片显示的起始位置,
    右边的auto 28px的意思是,图片的高度设为28px,图片宽度根据高度等比缩放。
    
    isHover: -1,
    
    <div class="mydiv" @click="onService" @mouseenter="isHover=1000" @mouseleave="isHover=-1">
       <div class="myicon" v-if="'1000'==selectId || isHover=='1000'" :style="{background :'url(~@/../static/images/helpCenter/help_qie.png) no-repeat -37px 0px / auto 28px'}"></div>
       <div class="myicon" v-else :style="{background :'url(~@/../static/images/helpCenter/help_qie.png) no-repeat 0 0px / auto 28px'}"></div>
       <span class="myspan">在线咨询</span>
    </div>
    或者
    <li class="myli" v-for="(item,index) in leftData" :key="index + '-help'" :class="item.id==selectId ? 'active-li':''">
        <div class="mydiv" @mouseenter="isHover=index" @mouseleave="isHover=-1" @click.stop="onType(item)">
            <div class="myicon" v-if="item.id==selectId || isHover==index" :style="{background :'url(' + item.icon + ') no-repeat -37px 0px / auto 28px'}"></div>
            <div class="myicon" v-else :style="{background :'url(' + item.icon + ') no-repeat 0 0px / auto 28px'}"></div>
            <span class="myspan">{{item.name}}</span>
        </div>
    </li>
    

    相关文章

      网友评论

          本文标题:vue显示图片的一部分

          本文链接:https://www.haomeiwen.com/subject/ihivqrtx.html