小程序图片添加视频播放按钮图标

先上效果图：

 

这个不是真的video组件，这是图片上定位了一个css元素而已，上wxss代码：

?

1 2 3 4 5 6 7 8

<view class="item-img">   <image wx:if="{{item.coverUrl}}" src="{{img_full_path + item.coverUrl}}" style="width:100%;height:100%;"></image>   <view class="circle">     <view class="circle_inner_play">     </view>   </view>   <view class="duration">{{util.secondToTimeStr(item.duration)}}</view> </view>

 

父级view样式：

?

1 2 3 4

.item .item-img{   height: 388rpx;   position: relative; }

现在定位一个圆圈居中显示

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.circle {   border-radius: 50px;   height: 50px;   position: absolute;   width: 50px;   z-index: 9998;   color: #fff;   background: #000;   opacity: 0.6;   left: 50%;   margin-left: -50rpx;   text-align: center;   margin-top: -230rpx; }

现在再画一个小三角：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

.circle_inner_play {   content: "";   display: block;   width: 0;   height: 0;   border-style: solid;   border-width: 10px 0 10px 20px;   border-color: transparent transparent transparent #fff;   position: absolute;   top: 50%;   left: 50%;   margin: -10px 0 0 -7px; }