Question

当我向图像添加模糊（CSS）并将其放入div时，为了保持笔直的边框，图像与其他元素混合：

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

如果没有混合，我怎么能有直边框？我只对Google Chrome有这个问题

Answer 1

如果你指的是采用它背后的颜色，那么你需要提供一个background-color，但如果你只是想让它成为一个正方形，那么试试这个原始代码的编辑： http://jsfiddle.net/Incredulous/6V9ua/

我删除了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;以消除边缘上红色的流血。

CSS模糊，边框与背景混合

1 个答案: