삼각형을 누르고 흰색 원 위에 내용을 포함시키는 방법은 무엇인가요? 이미지의 일부로 세 개의 오버레이 모양이 포함된 배경 이미지로 히어로 섹션을 만드는 솔루션을 찾으려고 합니다. 오버레이 위에는 h1, p 및 btn이 있습니다. 디자인이 어떻게 보일지 보여주는 스크린샷을 아래에 포함시켰습니다.
세 가지 오버레이가 있습니다:
이것이 제가 지금까지 가지고 있는 것입니다. 아래에 스니펫을 포함시켰으며 Codepen에도 작동하는 버전이 있습니다. 원은 왼쪽 하단 모서리의 올바른 위치에 있습니다.
으아악 으아악
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
원은 장식일 뿐 의미를 부여하지 않으므로 요소가 될 필요는 없습니다. 배경 이미지로 충분합니다.
이것은 콘텐츠 요소를 배치하고 두 개의 배경 이미지를 제공하는 간단한 코드 조각입니다. 둘 다 투명도가 있으며 방사형 그래디언트를 사용하여 둥글게 만듭니다.
참고: 특정 사용 사례에 맞게 글꼴 크기 설정을 변경해야 합니다. 반응하도록 뷰포트를 기준으로 만들었습니다.
또한 영웅이 전체 너비를 커버해야 하는지, 아니면 최소 높이를 설정해야 하는지에 대해 약간의 혼란이 있는 것 같습니다. 물론 이것이 원하는 경우 원은 사과를 기준으로 다른 위치에 있게 되며 이미지의 일부가 사라질 수 있습니다.