How to overlay an image with text with rounded background
P粉328911308
2023-08-30 15:20:14
<p>I need to copy in HTML what you see in this image: </p>
<p>The problem is that the text covers the div and the background image. If there was no image in the outer div and no solid color, I can imagine I could do this fairly easily with some small html elements with rounded corners placed in the right places, but the background image is what adds complexity. </p>
<p>So far I have this... As you can see, I'm stuck on two rounded corners. Can anyone suggest a solution? Please note that it must work in <strong>all modern browsers</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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need to add
:beforeand:afterto the.innertextelementrenew:
To have multiple rows, just add a
flex-direction: columncontainer, each row will have:after(right) corners, and only the first child element will There:before(top) corner#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>