父元素的filter样式影响子元素样式
现象
-
解决前示例-标题文本看不清
解决前
- 解决前代码如下
<template>
<view class="person-center">
<!-- 头部的背景处理 -->
<view class="header">
<view class="header_title">
<text>个人中心</text>
</view>
</view>
</view>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
.person-center {
.header {
width: 100%;
height: 428rpx;
background: linear-gradient(180deg, #80C8FE 0%, rgba(247, 249, 252, 0) 100%);
filter: blur(10rpx);
padding-top: 88rpx;
.header_title {
height: 88rpx;
line-height: 88rpx;
text-align: center;
}
}
}
</style>
解决办法
将filter样式添加给父元素的伪元素上
-
解决后示例
解决后 解决代码如下
<template>
<view class="person-center">
<!-- 头部的背景处理 -->
<view class="header">
<view class="header_title">
<text>个人中心</text>
</view>
</view>
</view>
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
.person-center {
.header {
width: 100%;
height: 428rpx;
position: relative;
&::before {
content: '';
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
background: linear-gradient(180deg, #80C8FE 0%, rgba(247, 249, 252, 0) 100%);
filter: blur(10rpx);
}
.header_title {
height: 88rpx;
padding-top: 88rpx;
line-height: 88rpx;
text-align: center;
}
}
}
</style>
