如何在div的顶部和右侧添加模糊效果？

.background{ 
    position: absolute; 
    left: 0; 
    width:50%; 
    right: 0; 
    bottom: 0; 
    top:0; 
    background-color: #000; 
    /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/ 

-webkit-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75); 
-moz-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75); 
box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75); 
}

什么，我想才达到是在黑色背景的顶部和右侧添加模糊效应。这就是我想才达到：

所以，我对图像的littlebit影子是在右侧，也有权利和DIV的顶侧边缘模糊有背景颜色。任何建议？

来源

2017-05-06 None

对不起，误解你的问题，改变了我的建议，这样的：HTTPS： //jsfiddle.net/LGSon/aod4rmx8/2/ – LGSon

div的边缘仍然没有模糊...其粗糙 – None

是[this]（https://jsfiddle.net/RahulRB1997/aod4rmx8/3/）小提琴几乎按照您的需求？ –

如果我没看错的，你问的是这样的添加模糊效果，

.data_protection { 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
}

来源

2017-05-06 12:52:00

我可以使用filer：blur，但是我怎么能在右边的图像上添加阴影如在我的小提琴那边？这是从左到右...... – None

.data_protection{ 
 
\t float: left; 
 
    width: 100%; 
 
    padding: 10px 0px; 
 
    padding-bottom: 30px; 
 
    position: relative; 
 
    background-image: url(https://ec.europa.eu/clima/policies/ets/ets-summer-university/sites/clima-ets-summer-university/files/sign%20up%20photo%20-%20typing.JPG); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    min-height: 400px; 
 

 
} 
 

 
.background { 
 
    padding: 50px; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 40%; 
 
    right: 0; 
 
    bottom: -10px; 
 
    top: 0; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    transform: translate3d(0px, -5px, 10px); 
 
    
 
    border: solid 1px #000; 
 
    padding-left: 1200px; 
 
    box-sizing: border-box; 
 
    box-shadow: inset -900px 0 0px 10px #000; 
 

 
}

<div class="data_protection"> 
 
\t \t \t \t \t <div class="background"></div> 
 
\t \t \t \t </div>

来源

2017-05-06 14:17:05

如何在div的顶部和右侧添加模糊效果？

回答

相关问题