css实现背景色高斯模糊

原创于 2022-02-15 22:42:27 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

css 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了如何利用CSS的filter属性和伪元素来创建一个模糊背景的效果，同时确保文字清晰可见。通过在父元素上应用`filter: blur()`和在伪元素上设置背景颜色及模糊效果，可以实现不干扰子元素显示的视觉效果。示例代码展示了在页面布局中应用此技巧的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现效果

在这里插入图片描述

2.实现原理

1.filter：blur()
2.伪元素设置，不影响子元素显示

3.实现代码

<view class="award a">苏苏小苏苏</view>
<view class="award ">苏苏小苏苏</view>

/* pages/another/filterBlur/index.wxss */
page {
  background: #ffbb5e;
  margin-top: 50px;
}

.award {
  width: 710rpx;
  border-radius: 20rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 73rpx 0 42rpx;
  position: relative;
  min-height: 423rpx;
  font-size: 34rpx;
  font-weight: 500;
  color: #FB962C;
  text-align: center;
}

.award::before {
  content: '';
  background: rgba(255, 245, 237);
  filter: blur(10px);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.a {
  overflow: hidden;
  margin-bottom: 40px;
}