使用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：

 < div class =placeholder> 
<！ - 模糊背景的模糊边缘 - > 
< div class =bg-image-blur>< / div> 
<！ -  same image，no blur  - > 
< div class =bg-image>< / div> 
<！ -  content  - > 
< div class =content>模糊图像边缘< / div> 
< / div> 
  

CSS：

 code> .placeholder {
 margin-right：auto; 
 margin-left：auto; 
 margin-top：20px; 
 width：200px; 
 height：200px; 
 position：relative; 
 / *这是示例的唯一相关部分* / 
} 
 / *两个DIV具有相同的图像* / 
 .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％; 
} 
 / *模糊背景，使模糊的边缘溢出顶部的模糊图像* / 
 .bg-image-blur {
 -webkit-filter： blur（20px）; 
 -moz-filter：blur（20px）; 
 -o-filter：blur（20px）; 
 -ms-filter：blur（20px）; 
 filter：blur（20px）; 
} 
 / *我添加了这个DIV，以防你需要将内容放在* / 
 .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; 
} 
  

请注意，模糊效果是使用图像， 。

我希望这有助于。

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

解决方案

I'm not entirely sure what visual end result you're after, but here's an easy way to blur an image's edge: place a div with the image inside another div with the blurred image.

Working example here: http://jsfiddle.net/ZY5hn/1/

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

Notice the blurred effect is using the image, so it changes with the image color.

I hope this helps.

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