Question

Looking for something like this 我想将两幅图像放在顶部，第二幅放在底部，宽度为100％。以及文字写在图像上。

<div>
    <a href=""><img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.vox-cdn.com%2Fthumbor%2FPkmq1nm3skO0-j693JTMd7RL0Zk%3D%2F0x0%3A2012x1341%2F1200x800%2Ffilters%3Afocal(0x0%3A2012x1341)%2Fcdn.vox-cdn.com%2Fuploads%2Fchorus_image%2Fimage%2F47070706%2Fgoogle2.0.0.jpg&imgrefurl=https%3A%2F%2Fwww.theverge.com%2F2015%2F9%2F1%2F9239769%2Fnew-google-logo-announced&docid=JWw0c9TecYe1RM&tbnid=5wK_L1umstSwXM%3A&vet=10ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhsKAEwAQ..i&w=1200&h=800&bih=625&biw=1366&q=google%20images&ved=0ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhsKAEwAQ&iact=mrc&uact=8"></a>
</div>
<div>
    <a href=""><img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fpay.google.com%2Fabout%2Fstatic%2Fimages%2Fsocial%2Fog_image.jpg&imgrefurl=https%3A%2F%2Fpay.google.com%2Fabout%2F&docid=zmoE9BrSKYr4xM&tbnid=faVYp-YX1tMUxM%3A&vet=10ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhtKAIwAg..i&w=1200&h=630&bih=625&biw=1366&q=google%20images&ved=0ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhtKAIwAg&iact=mrc&uact=8"></a>
</div>

我都获得了100％宽度的图像。

我需要首页上的两张图片。

Answer 1

请在这里检查：

.img{
  display:block;
  position:relative;
}
.img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}
.img span {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    text-align: center;
    transform: translateY(-50%);
    font-size: 30px;
}

<div class="img">
    <a href=""><img src="https://i.dailymail.co.uk/i/pix/2015/12/02/11/2EFC4AF400000578-3342478-image-a-13_1449054494559.jpg"></a>
  <span>Demo text</span>
</div>
<div class="img">
    <a href=""><img src="https://i.dailymail.co.uk/i/pix/2015/12/02/11/2EFC4AF400000578-3342478-image-a-13_1449054494559.jpg"></a>
  <span>Demo text</span>
</div>

Answer 2

我想这就是您要搜索的内容：

注意：文本的白色仅用于显示文本

h1{
  position: relative;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  font-size: 30px;
  color:#fff;
}
div{
	background: url('https://thought-leadership-production.s3.amazonaws.com/2016/10/28/14/29/18/d9cc4e0b-ba5c-44b6-9b4d-5feffab18b26/tnc_56094809_preview_cropped.jpg');
	text-align: center;
	background-repeat: no-repeat;
	height: 25rem;
	background-size:cover
}

<div>
   <h1>Demo text</h1>
</div>
<div >
   <h1>Demo text</h1>
</div>

Answer 3

首先为width:100%;，height:100%;标签设置html和body，然后将div标签的高度设置为50%通过css background属性设置图像，效果很好，我在下面添加了代码段。

html,body{
width:100%;
height:100%;
box-sizing:border-box;
 margin: 0;
}

div.img-container{
  height:50%;
  width:100%;
  background-repeat:no-repeat;
  background-size:contain;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
}

#img1{
  background:url(https://www.w3schools.com/html/pic_trulli.jpg);
}
#img2{
  background:url(https://www.w3schools.com/html/img_girl.jpg);
}

<html>
<body>
    <div id="img1" class="img-container">
      <a href="">DEMO TEXT</a>
    </div>
    <div id="img2" class="img-container">
      <a href="">DEMO TEXT</a>
    </div>
</body>
</html>

带文本的两个按钮图像（一个在顶部，第二个在底部）

3 个答案: