2014-09-10 116 views
0

我已经设置了模糊背景的页面,但是我得到一个白色的边框。我用这个问题的第一个答案:Is it possible to use -webkit-filter: blur(); on background-image?然而,它给了我一个白色的边缘模糊。是否有可能将其删除?我曾尝试缩放但无济于事:围绕模糊背景的白色模糊+保持文字不模糊

html:before { 
    content: ""; 
    position: absolute; 
    background: url(<?php echo $image ?>); 
    background-size: cover; 
    z-index: -1; /* Keep the background behind the content */ 
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */ 

    /* don't forget to use the prefixes you need */ 
    transform: scale(5); 
    transform-origin: top left; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 
html { 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    height: 100%; 
} 
+0

附加codepen你例子 – 2014-09-10 11:32:45

回答

3

可能更好地使用文字阴影或箱阴影

这样

-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 106, 154, 1); 
-moz-box-shadow: 0px 0px 19px 0px rgba(0, 106, 154, 1); 
box-shadow:   0px 0px 19px 0px rgba(0, 106, 154, 1);