둥근 배경의 텍스트로 이미지를 오버레이하는 방법
<p>다음 이미지에 표시된 내용을 HTML로 복사해야 합니다. </p>
<p>문제는 텍스트가 div와 배경 이미지를 덮고 있다는 것입니다. 외부 div에 이미지가 없고 단색이 없는 경우 둥근 모서리가 올바른 위치에 배치된 일부 작은 html 요소를 사용하여 이 작업을 상당히 쉽게 수행할 수 있다고 상상할 수 있지만 배경 이미지가 복잡성을 추가합니다. </p>
<p>지금까지 저는 이것을 가지고 있습니다... 보시다시피 저는 두 개의 둥근 모서리에 붙어 있습니다. 누구든지 해결책을 제안할 수 있나요? <strong>모든 최신 브라우저</strong>에서 작동해야 합니다. </p>
<p>
<pre class="brush:css;toolbar:false;">#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;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="outer">
<div id="innertext">두 줄로 구성된 테스트 제목<br></div>
</p>
