wxml
<swiper class='banner' indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class='wanbox'>
<image class='wan' src='http://wechatpx.oss-cn-beijing.aliyuncs.com/qixing/ceng.png'></image>
</view>
wxss
.slide-image {
width: 750rpx;
height: 345rpx;
}
.banner {
width: 750rpx;
height: 345rpx;
}
.wanbox{position: relative;z-index: 99}
.wan {
display: block;
width: 750rpx;
height: 35rpx;
margin-top: -34rpx;
}
图片下边可以使用 border-radius设置圆弧。。。。
background: linear-gradient(180deg, rgba(51, 187, 255, 1) 0%, rgba(77, 166, 255, 1) 100%); border-radius: 0 0 400rpx 400rpx / 0 0 80rpx 80rpx;
谢谢小仙,使用代码实现确实比图片来的好得多,感谢
直接用border-radius: 遮住不就好了 放图片占资源
吃藕