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

【问题标题】：Two button images with text (one on top and second on bottom)两个带有文本的按钮图像（一个在顶部，第二个在底部）
【发布时间】：2019-03-25 08:56:58
【问题描述】：

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% 的图像。

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

【问题讨论】：

问题是什么？这不是免费的代码编写服务。
我知道，但是已经有人回答了，谢谢。

标签： html image css button

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

首先为您的html,body 标签设置width:100%; 和height:100%;，然后将div 标签的高度设置为50%，并通过css background 属性设置您的图像，它正在工作好的，我在下面添加了sn-p。

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>

【讨论】：