背景色高斯模糊的使用、filter:blur()、以及消除周围模糊和白边的问题、backdrop-filter使用

陌~上花开

已于 2023-11-16 12:56:25 修改

阅读量1.2k

点赞数

分类专栏： HTML+css+js基本知识文章标签： filter 高斯模糊背景色

于 2022-08-17 10:07:10 首次发布

本文链接：https://blog.csdn.net/weixin_45803990/article/details/126176499

版权

HTML+css+js基本知识专栏收录该内容

28 篇文章 0 订阅

订阅专栏

高斯模糊

父元素使用position:relative

添加伪元素、设置透明度。

.header{
  position:relative
}

  .header::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #F25D00;
    filter: blur(10px);
    opacity: 0.09;
  }

消除周围模糊

父元素添加overflow:hidden

白边问题

伪元素添加transform: scale(1.2);

backdrop-filter使用 MDN文档

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

在这里插入图片描述

    <div class="container">
        <div class="box">
          <p>backdrop-filter: blur(10px)</p>
        </div>
      </div>

<style>
.container {
  background-image: url(https://picsum.photos/id/1080/6858/4574),linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  align-items: center;
  display: flex;
  justify-content: center;
  width: 300px;
  height: 200px;
}
.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 10px;
}
</style>