使用 CSS 模糊图像或背景图像的边缘 [英] Blur the edges of an image or background image with CSS

问题描述

我知道有很多新的 CSS 过滤器，我想知道是否有办法将它们应用于图像或背景图像.我读过的所有内容都在谈论使用阴影柔化图像，但是，阴影是一种颜色，我想模糊图像的边缘，以便在它们彼此相邻时可以更无缝地将它们混合在一起.现在看起来您只能使用投影或对整个图像应用模糊(根据我所阅读的内容).

我能想到的最接近的是一个半透明的盒子阴影......像这样

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

解决方案

如果您只是想模糊图像边缘，您可以简单地使用带有插图的框阴影.

工作示例:

HTML:

CSS

.image-blurred-edge {背景图片:url('http://lorempixel.com/200/200/city/9');宽度:200px；高度:200px；/* 您需要将阴影颜色与背景或图像边框相匹配以获得所需的效果*/box-shadow: 0 0 8px 8px 白色插图；}

I know there are a bunch of new CSS filters and I am wondering if there is a way to apply those to an image or background image. Everything I have read talks about softening the image with a drop shadow, however, a drop shadow is a color, and I want to blur the edges of images so that I could blend them together more seamlessly if they were next to each other. Right now it looks like you can only go with a drop shadow or apply a blur to the entire image (based on what I have read).

The closest I can come up with is a semi-transparent box shadow....like this

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);

解决方案

If what you're looking for is simply to blur the image edges you can simply use the box-shadow with an inset.

Working example: http://jsfiddle.net/d9Q5H/1/

HTML:

<div class="image-blurred-edge"></div>

CSS

.image-blurred-edge {
    background-image: url('http://lorempixel.com/200/200/city/9');
    width: 200px;
    height: 200px;
    /* you need to match the shadow color to your background or image border for the desired effect*/
    box-shadow: 0 0 8px 8px white inset;
}

这篇关于使用 CSS 模糊图像或背景图像的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！