背景が丸いテキストを画像にオーバーレイする方法
<p>この画像に表示されている内容を HTML にコピーする必要があります: </p>
<p>問題は、テキストが div と背景画像を覆っていることです。外側の div に画像がなく単色もない場合、角が丸い小さな HTML 要素を適切な位置に配置するだけで、これをかなり簡単に実行できると想像できますが、背景画像によって複雑さが増します。 </p>
<p>これまでのところ、私はこれを持っています...ご覧のとおり、2つの丸い角で立ち往生しています。誰かが解決策を提案できますか?
すべての最新ブラウザで動作する必要があることに注意してください: </p>
<p>
<pre class="brush:css;toolbar:false;">#outer {
幅:100%;
高さ:400ピクセル;
境界半径:20px;
背景画像:url(https://media.istockphoto.com/id/1323032473/es/vector/panal-abstracto-de-vector-azul-moderno-con-fondo-de-monitor-de-corazón-con- para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
位置:相対;
}
#innertext {
表示:インライン;
ボーダー右上半径:20px;
背景色:#fff;
パディング:5px 25px 0px 5px;
フォントサイズ:40px;
色:#000;
位置:絶対;
下:0ピクセル;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="outer">
<div id="innertext">2 行のテスト タイトル<br></div>
</div></pre>
</p>
