如何将响应式文本放在图像上？

Question

I've been trying to make a responsive image with text on it. My problem is that I can't make the structure and behavior to this whole component.

Any tips for how I can make it?

Answer 1

Try something like this.

 * { box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { margin: 0; }.hero { height: 100%; width: 100%; background: url('https://images.unsplash.com/photo-1633934243950-03a086c09e41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80'); background-size: cover; }.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; padding-left: 40px; padding-top: 40px; background: rgba(0,0,0,0.35); }

 <div class="hero"> <div class="overlay"> <h1>Hello World</h1> <p>Some other text goes here</p> </div> </div>

Answer 2

Create a div with the image and another div inside, place all your text in the inner div and position it absolute on top of the image.

Answer 3

Here are 2 approaches for it

 .image-container{ width:100%; height:40rem; position:relative; } img{ width:100%; object-fit:cover; } p{ position:absolute; font-size:4rem; color:red; font-weight:bold; top:50%; left:50%; transform:translate(-50%,-50%); }.image-container-two{ height:40rem; width:100%; background:src("https://unsplash.it/700"); background-size:cover; display:flex; justify-content:center; align-items:center; }.text-two{ font-size:4rem; color:red; font-weight:bold; }

 <div> <div class="image-container"> <img src="https://unsplash.it/500" /> <p> This is some text </p> </div> <div class="image-container-two"> <div class="text-two">This is also some text </div> </div> </div>