둥근 배경의 텍스트로 이미지를 오버레이하는 방법

Question

다음 이미지에 표시된 내용을 HTML로 복사해야 합니다.

문제는 텍스트가 div와 배경 이미지를 덮고 있다는 것입니다. 외부 div에 이미지가 없고 단색이 없는 경우 둥근 모서리가 올바른 위치에 배치된 일부 작은 html 요소를 사용하여 이 작업을 상당히 쉽게 수행할 수 있다고 상상할 수 있지만 배경 이미지가 복잡성을 추가합니다.

지금까지 저는 이것을 가지고 있습니다... 보시다시피 저는 두 개의 둥근 모서리에 붙어 있습니다. 누구든지 해결책을 제안할 수 있나요? 모든 최신 브라우저에서 작동해야 합니다.

#outer {
    너비:100%;
    높이:400px;
    테두리 반경:20px;
    배경 이미지:url(https://media.istockphoto.com/id/1323032473/es/Vector/panal-abstracto-de-Vector-azul-moderno-con-fondo-de-monitor-de-coraz%C3% B3n-con-para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
    위치:상대적;
}
#내부텍스트 {
    표시:인라인;
    테두리 상단 오른쪽 반경:20px;
    배경색:#fff;
    패딩:5px 25px 0px 5px;
    글꼴 크기:40px;
    색상:#000;
    
    위치:절대;
    하단:0px;
}

    
두 줄로 구성된 테스트 제목

Answer 1

:before 和 :after 添加到 .innertext 요소

를 추가해야 합니다.

업데이트:

여러 줄을 사용하려면 flex-direction: column 容器，每行都会有 :after （右）角，并且只有第一个子元素将有 :before(상단) 모서리를 추가하세요

으아악 으아악