잡동사니

반응형

질문

여기에 이미지 설명 입력


답변1

.blur postion : absolute 가 있으므로 .wrapper 위치 상대 를 포함 / 추가해야합니다. 수업.

.wrapper {background-color: tomato;
    border: 1px solid #dfe0e3;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: calc(30px/ 2) auto;
    min-height: calc(50vh - 30px);
    height: auto;
    font-size: 70px;
    position: relative;
}

.blur {
  -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background-color: #000000;
    opacity: 0.3;
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    z-index: 3;
    border-radius: 20px;
    height: 100%;
}
<div class="wrapper"><div class="blur"></div>fdskfjdksfjfjklsdjfkdls Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut minus error earum excepturi hic reiciendis officia libero molestias magni voluptas? Quidem aperiam perferendis consequuntur vero atque ipsum sed voluptate optio.</div>



 

 

 

 

출처 : https://stackoverflow.com/questions/63112567/overlay-background-does-not-fill-all-container-height

반응형

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band