Bagaimana untuk menindih imej dengan teks dengan latar belakang bulat
P粉328911308
2023-08-30 15:20:14
<p>Saya perlu menyalin dalam HTML apa yang anda lihat dalam imej ini: </p>
<p>Masalahnya ialah teks meliputi div dan imej latar belakang. Jika tiada imej dalam div luar dan tiada warna pepejal, saya boleh bayangkan saya boleh melakukan ini dengan agak mudah dengan beberapa elemen html kecil dengan sudut bulat diletakkan di tempat yang betul, tetapi imej latar belakang adalah yang menambah kerumitan. </p>
<p>Setakat ini saya mempunyai ini... Seperti yang anda lihat, saya tersepit di dua sudut bulat. Bolehkah sesiapa mencadangkan penyelesaian? Sila ambil perhatian bahawa ia mesti berfungsi dalam <strong>semua penyemak imbas moden</strong>: </p>
<p>
<pre class="brush:css;toolbar:false;">#outer {
lebar: 100%;
ketinggian:400px;
jejari sempadan:20px;
imej latar belakang: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=);
jawatan:saudara;
}
#innertext {
paparan:sebaris;
sempadan-atas-kanan-radius:20px;
warna latar belakang:#fff;
padding:5px 25px 0px 5px;
saiz fon: 40px;
warna:#000;
kedudukan:mutlak;
bawah:0px;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="outer">
<div id="innertext">Tajuk ujian<br>iaitu pada dua baris</div>
</div></pre>
</p>
您需要将
:before
和:after
添加到.innertext
元素更新:
要有多行,只需添加一个
flex-direction: column
容器,每行都会有:after
(右)角,并且只有第一个子元素将有:before
(顶部)角