利用 background 和 filter 模糊指定区域

标签：ros   header   img   技术   hub   导致   html   改变   位置   

背景知识：background-size: cover;，background-attachment:fixed;，filter:blur()

难题：

通常，我们会通过filter:blur()去实现背景高斯模糊，但是缺点很明显，整个背景都模糊了，能不能模糊其中指定的一块呢？比如：

<header>
  <div class="content"></div>
</header>  

header {
  width:100vw;
  height:100vh;
  background:url(‘https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg‘) no-repeat 0/cover fixed;
}
.content {
  width:50%; 
  height:50%;
  background:pink;
}

能不能只模糊 .content区域呢？

尝试：

• 通过半透明的背景和filter:blur来实现

  .content {
    width:50%; 
    height:50%;
    background:rgba(255,255,255,0.5);
    filter:blur(20px)
  }

  当然效果是不太好的：
  

方案：

• 把 .content 的背景换成和父元素一样，再使用 filter:blur()即：

  .content {
    width:50%; 
    height:50%;
    background:url(‘https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg‘) no-repeat 0/cover fixed;
    filter:blur(20px)
  }

  效果：
  

原理：

background-size:cover和background-attachment:fixed，这两个属性搭配导致了，父子元素虽然大小不一样，但是背景是重合的，即使加上

margin-left:200px;

改变了位置，背景图还是重合的，这个时候模糊子元素就像是模糊了父元素背景的某一部分一样，如图：

利用 background 和 filter 模糊指定区域

标签：ros   header   img   技术   hub   导致   html   改变   位置   

原文地址：https://www.cnblogs.com/xianshenglu/p/8970836.html