divの上下にぼかし効果を追加するにはどうすればよいですか？

Question

私はこのフィドル持っている：私はachiveしたい何

https://jsfiddle.net/aod4rmx8/

.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); 
} 

はトップと黒の背景の右側にぼかしEFECTを追加することです。これは私がachiveしたいものです。

私は右側にある画像上のlittlebit影を持っているだけでなく、背景色を持っているのdivの右側と上側の縁にぼかしを持っているようにするため。なにか提案を？

Answer 1

私は間違っていないよ場合は、申し訳ありませんが、あなたの質問を読み違え

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

Answer 2

.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>