如何使用具有圓角背景的文字覆蓋圖像
P粉328911308
2023-08-30 15:20:14
<p>我需要在 HTML 中複製您在此圖片中看到的內容:</p>
<p>問題是文字覆蓋了 div 和背景圖像。如果外部 div 中沒有圖像並且沒有純色,我可以想像我可以相當輕鬆地使用一些帶有圓角的小 html 元素放置在正確的位置來完成此操作,但是背景圖像是什麼增加了複雜性。 </p>
<p>到目前為止,我有這個...如你所見,我被困在兩個圓角上。誰能提出解決方案?請注意,它必須在<strong>所有現代瀏覽器</strong>中工作:</p>
<p>
<pre class="brush:css;toolbar:false;">#outer {
width:100%;
height:400px;
border-radius:20px;
background-image: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=);
position:relative;
}
#innertext {
display:inline;
border-top-right-radius:20px;
background-color:#fff;
padding:5px 25px 0px 5px;
font-size:40px;
color:#000;
position:absolute;
bottom:0px;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="outer">
<div id="innertext">A test title<br>that is on two lines</div>
</div></pre>
</p>
您需要將
:before
和:after
新增到.innertext
元素更新:
要有多行,只需添加一個
flex-direction: column
容器,每行都會有:after
(右)角,並且只有第一個子元素將有:before
(頂部)角