【uniapp】小程序中使用伪类给图片做出背景渐变色效果_uniapp背景色渐变

 如图所示，从白黑渐变色，效果和给图片加上一层蒙版差不多,代码入下：

<template>
 
	<!-- 上边大背景图片 -->
	<view class="page_top">
		<image src="/static/such.png" mode="aspectFill"></image>
	</view>
 
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		}
 
	},
</script>
 
 
<style scoped>
	/* 以下为自己的样式表 */
 
	.page_top {
		position: relative;
		width: 750rpx;
		height: 540rpx;
		// background-color: aqua;
	}
 
	.page_top>image {
		width: 750rpx;
		height: 540rpx;
	}
 
	.page_top::after
	/* 注意要把伪元素加在父盒子上面，不能加在图片上，否则无效 */
		{
		background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
		/* 第一个参数表示渐变方向，第二个参数是渐变开始颜色，第三个参数是渐变结束颜色 */
 
		/* 定位子绝父相 */
		position: absolute;
		/* 定位子绝父相 */
		width: 750rpx;
		height: 540rpx;
		/* 注意伪元素作为子元素盒子用绝对定位并且宽高和要覆盖的父级元素一致 */
		content: "";
		top: 0;
		left: 0;
 
	}
</style>