css #왼쪽 오른쪽만 배경 이미지 블러처리

왼쪽 오른쪽만 아래처럼 이미지 투명 or 블러 처리를 box-shadow를 활용하여 구현한 코드를 기록해둔다.

Side blur only creates left and right. I used CSS's box-shadow.

 

 

html

<div class="background" style="background-image: url('${bgImage}');"></div>

 

css

.background { width: 100%; max-width: 1000px; position: relative; margin: auto; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-color: #white; }
.background:before,
.background:after {
	content: " ";
	height: 100%;
	position: absolute;
	top: 0;
	width: 15px;
	box-shadow: 20px 0 150px 200px #white;
}
.background:before { left: -20px; }
.background:after { right: -20px; }