CSS模糊，并使用绝对div保留锐利的边缘 [英] CSS blur and retain sharp edges using absolute div

问题描述

如果img未设置为绝对，这个工作很好：

  div 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 {
 margin：20px; 
 overflow：hidden; 
} 
  

示例工作正常：http://jsfiddle.net/ThinkingStiff/b8fLU/ （取自另一个问题）

但如果我想使用背景图片使用绝对div来执行此操作？

 < div id =background>< / div& 
 
 #background {
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
 height：100％; 
 width：100％; 
 filter：blur（5px）brightness（0.75）; 
 -webkit-filter：blur（5px）brightness（0.75）; 
 -moz-filter：blur（5px）brightness（0.75）; 
 -ms-filter：blur（5px）brightness（0.75）; 
 -o-filter：blur（5px）brightness（0.75）; 
 position：absolute; 
 background-image：url（'images / bg.png'）; 
 z-index：1; 
} 
  

如何使用设置上面？

解决方案

将您的模糊元素放在如下所示的容器中：

 < div class =container> 
< div id =background>< / div> 
< / div> 
   
 
 
然后代替使用 height：100％和 width：100％使用这样：
  .container {
 position：relative; 
 width：300px; / *这是一个例子* / 
 height：300px; / *这是一个例子* / 
 overflow：hidden; 
} 
 
 #background {
 left：-15px; 
 right：-15px; 
 top：-15px; 
 bottom：-15px; 
 / *其他样式* / 
} 
  
 c $ c> 15px （或更多/更少）。
 
 
 
   DEMO    -   完整演示  
 
This works just fine if img is not set to absolute:
div 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 {
    margin: 20px;
    overflow: hidden;
}
Example working fine: http://jsfiddle.net/ThinkingStiff/b8fLU/ (taken from another question)

But what if I want to do this with an absolute div using background-image?
<div id="background"></div>

#background {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    filter: blur(5px) brightness(0.75);
    -webkit-filter: blur(5px) brightness(0.75);
    -moz-filter: blur(5px) brightness(0.75);
    -ms-filter: blur(5px) brightness(0.75);
    -o-filter: blur(5px) brightness(0.75);
    position: absolute;
    background-image: url('images/bg.png');
    z-index: 1;
}
How can I achieve the same effect (blur but with sharp edges) using the setup above?
解决方案
put your blur element in a container like this:
<div class="container">
    <div id="background"></div>
</div>
then instead of using height:100% and width:100% use like this:
.container{
    position:relative;
    width:300px;          /* this is an example */
    height:300px;         /* this is an example */
    overflow:hidden;
}

#background {
    left:-15px;
    right:-15px;
    top:-15px;
    bottom:-15px;
    /* other styles */
}
you need to remove 15px (or more/less) from each side of your element.

DEMO - Full DEMO

                        
这篇关于CSS模糊，并使用绝对div保留锐利的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！