Question

我使用此代码模糊了一些图片

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

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

Answer 1

您可以将<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>

Answer 2

我能够使用

完成这项工作

transform: scale(1.03);

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

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

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

Answer 3

我将-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);
}

DEMO：http://jsfiddle.net/DA5L4/18/

此技术适用于Chrome34和iOS7.1

更新

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

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

Answer 4

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

这看起来也很不错:)）

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

.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 5

在可以使IMG 位置：绝对的许多情况下，您可以使用剪辑来隐藏模糊的边缘 - 并且不需要外部DIV。 / p>

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 6

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

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

使用position: relative;和overflow: hidden;

将图片插入其中

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

Answer 8

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

如果您不知道图像尺寸，有关将剪辑添加到位置绝对图像的答案会有问题。

Answer 9

您可以通过剪切图像并应用将模糊效果设置为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);
}

Answer 10

最简单的方法是向包含图像的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>

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

Answer 11

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

DOM：

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

CSS：

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

Answer 12

我发现，在我的情况下，我没有必要添加包装器。

我刚刚添加了 -

margin: -1px;

或

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

我的模糊元素绝对定位。

Answer 13

如果您使用背景图片，我找到的最佳方式是：

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

Answer 14

这是我提出的解决方案，保留100％的图像，不需要裁剪：

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

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

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

14 个答案:

输出

CSS

HTML

更新

CSS：

HTML