如何在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的頂部和右側添加模糊效果？

回答

相關問題