CSS 模糊，边框与背景融合

Question

当我向图像添加模糊 (CSS) 并将其放入 div 中以保持直线边框时，图像会与其他元素混合：

我的代码是：https://drive.google.com/file/d/0B2t-Ql_mj7hRU0NHZkpDbHZPWWM/edit?usp=sharing

如何在不混合的情况下获得直线边框？
我只有谷歌浏览器有这个问题

Answer 1

如果您指的是它采用了它背后的颜色，那么您需要为其提供 background-color，但如果您只是希望它是一个正方形，那么请尝试对您的原始代码进行以下编辑：@987654321 @

我已经删除了 img 选择器的重复 CSS，并在 -20 的末尾添加了 px。你的 CSS 现在看起来像这样：

body{
    background:red;
    text-align:center;
    }
img{
    -webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    filter: blur(20px);
    margin:-20px;
    }
div{
    overflow:hidden;
    display:table;
    background-color:white;
    }

我添加了 display:table; 以使您的 div 适合其中的内容，并添加了 background-color:white; 以消除边缘上的红色出血。