鍍金池/ 問答/HTML/ css背景圖片重疊覆蓋問題

css背景圖片重疊覆蓋問題

在vue項目中，有以下html:

 <div class="ware-image" :style="'background-image: url(' + ware.mainPic + ')'"></div>
 <i class="sticker-image" :style="'background-image: url(' + ware.sticker + ')'"></i>

css為：

 .ware-image
    display: inline-block
    width: 60px
    height 60px
    font-size: $font-size-medium
    background-size: contain
    background-repeat: no-repeat
    vertical-align: middle
    border: 1px solid $color-primary

.sticker-image
    position: absolute
    display: inline-block
    width: 20px
    height: 20px
    background-size: contain
    margin-left: (-@width)px

但是最終的效果為：

clipboard.png

圖片重疊部分顯示的是第一張圖片的顏色，我設置了z-index也沒有用，請問怎么解決？

回答
編輯回答
哎呦喂

上面那個圖是透明的，在一些鏤空的地方會看到下面的內容，你再給i設置個背景色就看不到了。但是你圖片并不是方形，所以在邊邊角角上回有底色的顯示，還需要加上適當的圓角。

2018年8月4日 19:59
編輯回答
孤酒

你需要給i標簽加一個background-color；

2017年12月1日 08:12
編輯回答
熊出沒

加個底色就好了啊。css背景圖片和背景色屬性并不是互斥的。

2017年8月1日 18:52
編輯回答
挽青絲

圖標加個背景設置成需要的顏色

2017年2月5日 23:03