Bagaimana untuk menindih imej dengan teks dengan latar belakang bulat

Question

Saya perlu menyalin dalam HTML apa yang anda lihat dalam imej ini:

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.

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 semua penyemak imbas moden:

#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;
}

<div id="outer">
    <div id="innertext">Tajuk ujian<br>iaitu pada dua baris</div>
</div>

Answer 1

Anda perlu menambah elemen :before 和 :after 添加到 .innertext

Kemas kini:

Untuk mempunyai berbilang baris, cuma tambahkan sudut flex-direction: column 容器，每行都会有 :after （右）角，并且只有第一个子元素将有 :before (atas)

#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%C3%B3n-con-para-la.jpg?s=2048x2048&w=is&k=20&c=mXe4wSHc8kAcOXastbN9jhinrWGQX3vvJQUhDgvOcqA=);
  position: relative;
}
#inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  bottom: 0px;
}
.innertext {
  display: inline;
  position: relative;
  border-top-right-radius: 20px;
  background-color: #fff;
  padding: 5px 25px 0px 5px;
  font-size: 40px;
  color: #000;
}
.innertext:first-child::before,
.innertext::after {
  content: "";
  display: block;
  width: 40px;    /* double the radius */
  height: 40px;   /* double the radius */
  background-color: transparent;
  position: absolute;
  border-bottom-left-radius: 20px;
  box-shadow: 0 20px 0 0 #fff;  /* this to create the inverted corner border radius area, if you desire to change the positon you can control it via the first two values 0 20px which represents the x & y */
}
.innertext::before {
  top: -40px;
  left: 0;
}
.innertext::after {
  right: -40px;
  bottom: 0;
}
.innertext span {
  position: relative;
  z-index: 1;   /* to overcome the overlapping with the text */
}

<div id="outer">
  <div id="inner-container">
    <div class="innertext"><span>A test</span></div>
    <div class="innertext"><span>A test with a second line</span></div>
  </div>
</div>