So überlagern Sie ein Bild mit Text mit abgerundetem Hintergrund

Question

Ich muss in HTML kopieren, was Sie in diesem Bild sehen:

Das Problem besteht darin, dass der Text das Div und das Hintergrundbild verdeckt. Wenn es im äußeren Div kein Bild und keine Volltonfarbe gäbe, kann ich mir vorstellen, dass ich dies ziemlich einfach mit einigen kleinen HTML-Elementen mit abgerundeten Ecken an den richtigen Stellen tun könnte, aber das Hintergrundbild erhöht die Komplexität.

Bis jetzt habe ich das... Wie Sie sehen, stecke ich bei zwei abgerundeten Ecken fest. Kann jemand eine Lösung vorschlagen? Bitte beachten Sie, dass es in allen modernen Browsern funktionieren muss:

#outer {
    Breite: 100 %;
    Höhe:400px;
    Randradius:20px;
    Hintergrundbild: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:relativ;
}
#innertext {
    Anzeige:inline;
    Rand-oben-rechts-Radius:20px;
    Hintergrundfarbe:#fff;
    Polsterung: 5px 25px 0px 5px;
    Schriftgröße:40px;
    Farbe:#000;
    
    Position:absolut;
    unten:0px;
}

<div id="outer">
    <div id="innertext">Ein Testtitel<br>der aus zwei Zeilen besteht</div>
</div>

Answer 1

您需要将 :before 和 :after 添加到 .innertext 元素

更新：

要有多行，只需添加一个 flex-direction: column 容器，每行都会有 :after （右）角，并且只有第一个子元素将有 :before （顶部）角

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