이미지 가장자리에서 그라데이션 효과가 페이드 아웃되지 않는 이유는 무엇입니까?

Question

이미지의 가장자리가 흐릿하거나 적어도 희미하게 희미해지기를 원합니다. 내가 시도한 것은 아무것도 없었고 Stackoverflow에 대한 모든 질문을 살펴보았습니다. 저는 Sass가 아닌 CSS를 사용하고 있습니다. 문제를 복잡하게 만들기 위해 페이지에 배경 이미지를 두고 불투명도가 0.8인 흰색 마스크로 덮었습니다. 누구든지 도와주실 수 있나요?

제 코드펜입니다.

으아악 으아악

Answer 1

결국 컨셉을 조금 바꿔야 했어요. 전체 페이지에서 배경 이미지와 마스크를 제거하고 마스크 없이 페이지 배경만 흰색으로 설정했습니다. 그런 다음 이미지 또는 배경 이미지에 CSS를 사용하여 가장자리를 흐리게 하는 솔루션을 사용했습니다

제 코드는 다음과 같습니다:

html:

으아악

CSS:

으아악