uniapp子绝父相实现图片上放文字，文体超出图片位置，盒子设置高度

<template>
<view class="tips">
	<!-- widthFix：宽度不变，高度自适应 -->
	<image class="tips_bg" src="images/a.jpg" mode="widthFix"></image>
	<view class="tips_text">
		<text class="tips_title">这是title</text>
		<text class="tips_content">这是content</text>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.tips{
	position: relative;
	margin-top: 60rpx;
	width: 100%;
	height: 190rpx;  //设置高度将盒子撑起来，避免下方元素浮动
	.tips_bg{
		position: absolute;
		width: 100%;
	}
	.tips_text{
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 90rpx;
		.tips_title{
			margin-top:-20rpx;  //通过设置负数，实现文字超出图片效果
			font-weight: 700;
			font-size: 18px;
			color: #FFFFFF;
			text-shadow: 0 2px 4px rgba(0,0,0,0.50);
		}
		.tips_content{
			margin-top: 26rpx;
			font-size: 14px;
			color: #FFFFFF;
			text-shadow: 0 2px 4px rgba(0,0,0,0.50);
		}
	}
}
<style>

记录一下颜色渐变
//渐变背景颜色
style="background: linear-gradient(to bottom, #FFF4E0, #FEEDD5)"