你能基于渐变蒙版实现 CSS 模糊效果吗？

Question

你能基于渐变掩码使用CSS模糊效果吗？

类似于这种效果，http://www.imagemagick.org/Usage/mapping/#blur？

- boom

---

可能有可能没有，但似乎只在WebKit中可行。 - Passerby

我只需要在webkit中使用 :) 我会查看你提供的链接，谢谢。 - boom

Answer 1

这可以帮助您http://codepen.io/iamvdo/pen/xECmI

.effet{
  width: 400px; height: 300px;
  margin: 0 auto 50px auto;
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
  position: absolute;
}
.filtre--r{
  -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
  -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
  -webkit-filter: blur(5px);
  mask: url('#mask-radial');
  filter: url('#filtre1');
}
.filtre--l{
  -webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);
  -webkit-mask: linear-gradient(black, transparent 30%, black);
  -webkit-filter: blur(3px);
  mask: url('#mask-linear');
  filter: url('#filtre2');
}
.filtre:hover{
   -webkit-mask: none;
   -webkit-filter: none;
   mask: none;
   filter: none;
}
p{
   text-align: center;
   color: rgba(0,0,0,.6);
   margin: 1em;
}
p a{
  color: rgba(0,0,0,.6);
}

<p><strong>Radial</strong> progressive blur</p>
<div class="effet">
  <img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
<img class="filtre filtre--r" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
</div>
<p><strong>Linear</strong> progressive blur</p>
<div class="effet">
<img src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="" />
<img class="filtre filtre--l" src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="" />
</div>
<p>Hover over images to see without blur</p>
<p>Next demo: <a href="http://codepen.io/iamvdo/pen/djEBu" target="_blank">iOS 7 background blur with CSS</a></p>
<svg height="0">
<defs>
  <mask id="mask-radial">
    <rect width="400" height="300" fill="url(#g1)"></rect>
    <radialGradient id="g1" cx="50%" cy="50%" r="50%">
      <stop stop-color="black" offset="50%"/>
      <stop stop-color="white" offset="110%"/>
    </radialGradient>
  </mask>
  <mask id="mask-linear">
    <rect width="400" height="300" fill="url(#l1)"></rect>
    <linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="white" offset="0%"/>
      <stop stop-color="black" offset="30%"/>
      <stop stop-color="white" offset="100%"/>
    </linearGradient>
  </mask>
  <filter id="filtre1">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
  <filter id="filtre2">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
  </filter>
</defs>
</svg>

- Roman Zaykovsky

---

这个方法的原理是使用一个模糊图像、一个正常图像，以及在两者之间用渐变掩蔽。这是一个很棒的解决方案，但我希望你能根据动态内容（例如视频或轮播图）进行模糊处理，但滤镜似乎不会影响它们下面的层。 - alana314

Answer 2

[编辑] 从2022年10月起，现在所有的现代浏览器都可以实现此功能。

---

是的，你可以，但目前不是所有浏览器都支持背景模糊效果。

这是一个简单的例子，在Chrome和Safari上可以工作，但在Firefox上不行（因为缺乏背景滤镜支持）。 https://codepen.io/antoniandre/pen/vYpWQXd?editors=0100

* {margin: 0}

body {
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1500042600524-37ecb686c775?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') 0 0 / cover;

  &:after {
    content: '';
    position: absolute;
    inset: 10%;
    backdrop-filter: blur(20px);
    border: 1px solid white;
    -webkit-mask: linear-gradient(90deg, transparent, black 50%);
  }
}

- antoni

---

火狐浏览器刚刚添加了这个功能吗？我在Chrome和Firefox中打开了您在CodePen上的代码，但我没有看到任何区别。 - morph3us

确�是这样�� - antoni

安卓版的Firefox目前还不支持此功能。 - SIMMORSAL

Answer 3

你现在可以简单地使用：

backdrop-filter: blur(4px)

除了 Firefox 浏览器，所有现代浏览器都支持它。

- Okidoki73

---

我认为这对于海报的需求来说是不够的，因为它会使背景和下面的内容交界处整体模糊，而不是呈现渐变效果。 - Alexander Nied