왜 css`-webkit mask box image`가 넘침을 추가합니까: 부모에 숨긴 후에 사용하지 않습니까?

2211 단어 webdevcsshtml
나는 카드에 선형 모호성을 실현하려고 시도했다. 아래와 같다

선형 흐림은 다음 CSS 속성에 적용됩니다.
.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}
추가overflow:hidden;-webkit-mask-box-image속성이 적용되지 않은 후, 이런 이상한 행동은 무슨 원인이 있습니까?
.app-container {
  position: relative;
  background: url("https://res.cloudinary.com/dmwrugc6z/image/upload/v1639725427/wallhaven-lq1ezq_blo0mr.jpg");
  background-size: cover;
  border-radius: 24px;
  margin: auto;
  width: 328px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow:hidden;
}

.blur-background {
  height: 144px;
  position: absolute;
  left: 0;
  right: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(20px);
  -webkit-mask-box-image: linear-gradient(to top, black, black, transparent);
}
흐림은 다음 그림과 같은 마스크가 아닙니다

당신은 여기서 원본 코드를 찾을 수 있습니다: https://codesandbox.io/s/linear-blur-issue-vdjw7?file=/src/styles.css
Windows 11에서 파일 탐색기 바로 가기 만들기
Docker 베이스 - 천지 Docker 시작

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage