怎样在一张图片上叠加图标
通过把父容器设置为position: relative
,再对图标元素设置position: absolute; top: 10px; right: 10px;
即可。参考
例:
HTML:1
2
3
4<view class="outer">
<view class='question'>?</view>
<image src="{{url}}"></image>
</view>
CSS:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.outer {
position: relative;
}
.question {
position:absolute;
top:10px;
right:10px;
border-radius:50%;
border:1px solid #DDD;
width:16px;
height:16px;
font-size:11px;
color:#DDD;
opacity: 0.5;
}
效果图,右上角叠加一个问号: