使用CSS模糊图像或背景图像的边缘

时间:2014-07-12 05:19:51

标签: html css css3 filter

我知道有一堆新的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);

4 个答案:

答案 0 :(得分:78)

如果你要找的只是模糊图像边缘,你可以简单地使用带阴影的盒子阴影。

工作示例: http://jsfiddle.net/d9Q5H/1/

Screenshot

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

答案 1 :(得分:17)

我不完全确定您之后的视觉效果是什么,但这是模糊图像边缘的简单方法:将图像放在另一个div中模糊的图像。

此处的工作示例: http://jsfiddle.net/ZY5hn/1/

Screenshot

HTML:

<div class="placeholder">
     <!-- blurred background image for blurred edge -->
     <div class="bg-image-blur"></div>
     <!-- same image, no blur -->
     <div class="bg-image"></div>
     <!-- content -->
     <div class="content">Blurred Image Edges</div>
</div>

CSS:

.placeholder {
    margin-right: auto;
    margin-left:auto;
    margin-top: 20px;
    width: 200px;
    height: 200px;
    position: relative;
    /* this is the only relevant part for the example */
}
/* both DIVs have the same image */
 .bg-image-blur, .bg-image {
    background-image: url('http://lorempixel.com/200/200/city/9');
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
}
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */
 .bg-image-blur {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}
/* I added this DIV in case you need to place content inside */
 .content {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 0 3px #000;
    text-align: center;
    font-size: 30px;
}

请注意,模糊效果正在使用图像,因此它会随图像颜色而变化。

我希望这会有所帮助。

答案 2 :(得分:1)

如果将图像设置为div,则还必须同时设置高度和宽度。这可能会导致图像失去比例。此外,您必须在CSS中设置图片网址,而不是HTML。

您可以使用IMG标签设置图像。在容器类中,您只能以百分比或像素为单位设置宽度,高度将自动保持比例。

这对于搜索引擎和阅读引擎使用IMG标签定义图像的可访问性也更有效。

.container {
	margin: auto;
	width: 200px;
	position: relative;
}

img {
	width: 100%;
}

.block {
	width: 100%;
	position: absolute;
	bottom: 0px;
	top: 0px;
	box-shadow: inset 0px 0px 10px 20px white;
}
<div class="container">
	<img src="http://lorempixel.com/200/200/city">
	<div class="block"></div>
</div>

答案 3 :(得分:0)

<html>
<head>
<meta charset="utf-8">
<title>test</title>

<style>
#grad1 {
  height: 400px;
  width: 600px;
  background-image: url(t1.jpg);/* Select Image Hare */
}


#gradup {
  height: 100%;
  width: 100%;
  background: radial-gradient(transparent 20%, white 70%); /* Set radial-gradient to faded edges */

}
</style>

</head>

<body>
<h1>Fade Image Edge With Radial Gradient</h1>

<div id="grad1"><div id="gradup"></div></div>

</body>
</html>