如何使用模糊和盒子阴影？

Question

我有这个小提琴：

https://jsfiddle.net/npLsz70f/

HNil

我想要的是在div的右侧添加黑色背景阴影，该阴影位于右侧的图像的一半上。有什么建议我能做到吗？

Answer 1

.data_protection{
	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">
					<div class="background">


					</div>

				</div>