使用CSS3滤镜模糊定义的边缘

Question

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

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

然而,图像的边缘也变得模糊.是否可以模糊图像,同时保持边缘定义？像插图模糊或什么？

Answer 1

你可以把它放在一个<div>with 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>????????????

Answer 2

我能够做到这一点

transform: scale(1.03);

应用于图像的属性.出于某种原因,在Chrome上,如果存在任何相对定位的父元素,则提供的其他解决方案将无效.

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

这样,图像将略微放大3%,并且边缘将被裁剪,这对于模糊图像无论如何都不应该是问题.它在我的情况下效果很好,因为我使用高分辨率图像作为背景.祝好运!

Answer 3

最新答案 (2024)

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;
}

<div class="blurred"></div>

请记住，IE不支持此功能，只有在明确启用的情况下，它才适用于 Firefox。

Answer 4

我用-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).

Answer 5

你也可以保留整个视频,你不必削减一些东西.
您可以在白色模糊边缘上叠加嵌入阴影.

这看起来也很不错:)

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

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

Answer 6

在IMG可以定位的许多情况下:绝对,你可以使用剪辑来隐藏模糊边缘 - 而外部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);
}

Answer 7

我自己今天解决了同样的问题,我想提出一个(目前)适用于主流浏览器的解决方案.此页面上的其他一些答案确实有效,但最近的更新,无论是浏览器还是操作系统,都取消了大部分/全部这些答案.

关键是将图像放在一个容器中,并进行转换:将该容器从它的溢出中扩展出来:隐藏父级.然后,模糊应用于容器内的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);
}

Answer 8

将图像插入到 a 中并position: relative;使用overflow: hidden;

超文本标记语言

<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。