微信小程序自定义顶部渐变色

自定义顶部渐变色

效果图：

.json

"navigationStyle":"custom"

wxml

<view class="view_top">
	<image class="image_top_1" src="../images/new_top_bg.png"></image>
	<view class="view_bt">
		<text class="text">标题</text>
		<button class="bt_1">提交</button>
		<button class="bt_1">取消</button>
	</view>
</view>

wxss

.view_top {
     
  width: 100%;
  height: 160rpx;
  position: relative;
  /* display: flex;
  justify-content: center; */
}

.image_top_1 {
     
  width: 100%;
  height: 100%;
  position: absolute;
}


.view_bt {
     
  width: 100%;
  display: flex;
  flex-direction: row;
  
  margin-left: 10rpx;
  margin-right: 10rpx;

  margin-top: 45rpx;
  /* justify-content: center; */
  
  align-items: center;

  position: absolute; 
  /* 要约束所在位置的子元素的位置要设置成绝对 */


}

.text{
     
  width: 150rpx;
  margin-top: 25rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.bt_1 {
     
  margin-left: 10rpx;
  margin-right: 10rpx;

  width: 150rpx;
  height: 65rpx;
  color: #6699FF;
  border: 3rpx solid #6699FF;
  border-radius: 80rpx;
  font-size: 35rpx;
  margin-top: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}

最后就是效果背景图