【问题标题】：Defined Edges With CSS3 Filter Blur使用 CSS3 滤镜模糊定义的边缘
【发布时间】：2012-08-26 19:14:00
【问题描述】：

我用这段代码模糊了一些图像

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

不过，图像的边缘也会变得模糊。是否可以在保持边缘定义的同时模糊图像？比如嵌入模糊之类的？

【问题讨论】：

标签： css

【解决方案1】：

最新答案 (2021)

请改用backdrop-filter！它像filter 一样模糊，但没有任何边缘，也没有任何妥协，例如调整图像大小或缩放图像。

.blurred::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* apply the blur */
  pointer-events: none; /* make the overlay click-through */
}

.blurred {
  position: relative;
  width: 500px;
  height: 300px;
  background: no-repeat center center;
  background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
  background-size: cover;
}

&lt;div class="blurred"&gt;&lt;/div&gt;

请记住，这不是 IE 中的 supported，它只有在明确启用后才能在 firefox 中使用。

【讨论】：

【解决方案2】：

最简单的方法就是给包含图片的 div 添加一个透明边框，并将其 display 属性设置为 inline-block，如下所示：

CSS：

div{
margin: 2rem;
height: 100vh;
overflow: hidden;
display: inline-block;
border: 1px solid #00000000;
}

img {
-webkit-filter: blur(2rem);
filter: blur(2rem);
}

HTML

<div><img src='https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80' /></div>

这是一个描述相同内容的代码笔： https://codepen.io/arnavozil/pen/ExPYKNZ

【讨论】：

【解决方案3】：

今天我自己解决了同样的问题，我想提出一个（目前）适用于主要浏览器的解决方案。此页面上的其他一些答案确实有效，但最近的更新，无论是浏览器还是操作系统，都使大多数/所有这些答案无效。

关键是将图像放置在容器中，并从其溢出：隐藏的父容器中转换：缩放该容器。然后，模糊被应用到容器内的 img，而不是容器本身。

工作小提琴：https://jsfiddle.net/x2c6txk2/

HTML

<div class="container">
    <div class="img-holder">
        <img src="https://unsplash.it/500/300/?random">
    </div>
</div>

CSS

.container {
    width    : 90%;
    height   : 400px;
    margin   : 50px 5%;
    overflow : hidden;
    position : relative;
}

.img-holder {
    position  : absolute;
    left      : 0;
    top       : 0;
    bottom    : 0;
    right     : 0;
    transform : scale(1.2, 1.2);
}

.img-holder img {
    width          : 100%;
    height         : 100%;
    -webkit-filter : blur(15px);
    -moz-filter    : blur(15px);
    filter         : blur(15px);
}

【讨论】：

我见过的最美观的css代码！

【解决方案4】：

如果您使用背景图片，我发现的最佳方法是：

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;

【讨论】：

这其实是一个聪明的解决方案。我用百分比做了这个并添加了 ie: width: 105%;

【解决方案5】：

这是我想出的一个解决方案，可以保持 100% 的图像并且不需要裁剪：

基本上，我将图像平铺在 3x3 网格中，然后模糊所有内容，然后放大中心图像，在模糊后效果时有效地创建重复边缘，这有点奇怪，css3 没有像构建的重复边缘在。

链接到方法/代码： How to blur an image using CSS3 without cropping or fading the edges?

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
好吧，你这么说很有趣，因为我刚刚更新了那个帖子和标题，这完全弄乱了这里的链接 x)

【解决方案6】：

我将-webkit-transform: translate3d(0, 0, 0); 与overflow:hidden; 一起使用。

DOM：

<div class="parent">
    <img class="child" src="http://placekitten.com/100" />
</div>

CSS：

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.child {
    -webkit-filter: blur(10px);
}

演示：http://jsfiddle.net/DA5L4/18/

该技术适用于 Chrome34 和 iOS7.1

更新

http://jsfiddle.net/DA5L4/50/

如果您使用最新版本的 Chrome，则无需使用 -webkit-transform: translate3d(0, 0, 0); hack。但它不适用于 Safari(webkit)。

【讨论】：

@Razvan Cercelaru 真的吗？你检查了我的演示是什么版本的 Safari？它适用于 Mac Safari 7。
为我工作！谢谢！（铬 50.0.2661.86（64 位）OSX）

【解决方案7】：

只是对已接受答案的一些提示，如果您使用绝对位置，负边距将不起作用，但您仍然可以将顶部、底部、左侧和右侧设置为负值，并隐藏父元素溢出。

不知道图片大小的情况下，添加clip定位绝对图片有问题。

【讨论】：

【解决方案8】：

我发现，就我而言，我不必添加包装器。

我刚刚添加了-

margin: -1px;

或

margin: 1px; // any non-zero margin
overflow: hidden;

我的模糊元素是绝对定位的。

【讨论】：

volkerotto.net/2014/07/03/…

【解决方案9】：

我能够使用

transform: scale(1.03);

应用于图像的属性。由于某种原因，在 Chrome 上，如果存在任何相对定位的父元素，则提供的其他解决方案将无法正常工作。

查看http://jsfiddle.net/ud5ya7jt/

这样，图像将略微放大 3%，边缘将被裁剪，这对于模糊图像来说应该不是问题。它在我的情况下效果很好，因为我使用高分辨率图像作为背景。祝你好运！

【讨论】：

这很好，简单且可调整。它非常适合我的情况jsfiddle.net/ud5ya7jt/28，而其他一些解决方案现在似乎失败了。
非常感谢你，这正是我想要的:)
用overflow: hidden 设置父级将删除滚动条！谢谢！
如此简单的解决方案！
scale(1) 确实有效，但 1.03 是为了让我们将图像裁剪 3%，以使模糊的边缘不那么容易被注意到

【解决方案10】：

你也可以保留整个视频，你不必剪掉一些东西。
您可以在白色模糊的边缘上叠加嵌入阴影。

这看起来也很不错:)

只需将此代码粘贴到您视频的父级：

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}

【讨论】：

工作愉快，其他建议都没有帮助。
在我的情况下，它有所帮助，但它仍然留下一些不希望的模糊，所以我添加了一个额外的盒子阴影层：box-shadow: inset 0 0 200px #000000, inset 0 0 200px #000000;

【解决方案11】：

您可以通过剪切图像并应用将模糊效果设置为 0 像素的包装元素来阻止图像重叠其边缘。看起来是这样的：

HTML

<div id="wrapper">
  <div id="image"></div>
</div>

CSS

#wrapper {
  width: 1024px;
  height: 768px;

  border: 1px solid black;

  // 'blur(0px)' will prevent the wrapped image
  // from overlapping the border
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

#wrapper #image {
  width: 1024px;
  height: 768px;

  background-image: url("../images/cats.jpg");
  background-size: cover;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);

  // Position 'absolute' is needed for clipping
  position: absolute;
  clip: rect(0px, 1024px, 768px, 0px);
}

【讨论】：

【解决方案12】：

在带有position: relative;和overflow: hidden;的a中插入图片

HTML

<div><img src="#"></div>

CSS

div {
    position: relative;
    overflow: hidden;
}
img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

这也适用于可变大小的元素，例如动态 div。

【讨论】：

【解决方案13】：

您可以将其放在<div> 和overflow: hidden; 中，并将<img> 设置为margin: -5px -10px -10px -5px;。

演示：

输出

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

HTML

<div><img src="http://placekitten.com/300" /></div>

【讨论】：

@Moppy 这对我来说在 Chrome 23/OS X 中不起作用。我认为margin 是必需的。
@Moppy 因为img 在div 内，它的blur 溢出了div 的边界。 overflow: hidden; 将其切断。
JSFiddle 底部的垃圾是怎么回事？我不明白为什么 GA 跟踪 JSFiddle 是必要的......
@Bojangles，jsfiddle中图片底部的“垃圾”在image itself中。
有没有办法为背景图片做到这一点？这个想法是创建一个带有文本的模糊背景图像

【解决方案14】：

在IMG可以制作position:absolute的许多情况下，您可以使用clip来隐藏模糊的边缘——而外部DIV是不必要的。

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    position: absolute;
    clip: rect(5px,295px,295px;5px);
}

【讨论】：

caniuse.com/#feat=css-clip-path 这里浏览器支持剪辑。 IE 是最好的?

【解决方案15】：

您可以尝试在其他元素上添加边框：

DOM：

<div><img src="#" /></div>

CSS：

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}

【讨论】：