Изображения с двумя кнопками с текстом (одно сверху и второе снизу) - PullRequest
Новая
       1

Изображения с двумя кнопками с текстом (одно сверху и второе снизу)

0 голосов
/ 25 марта 2019

В поисках чего-то подобного Я хотел сделать два изображения, одно сверху и второе снизу с шириной 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%.

Мне нужны оба изображения на первой странице.

Ответы [ 3 ]

0 голосов
/ 25 марта 2019

Я думаю, это то, что вы можете искать:

ПРИМЕЧАНИЕ. Белый цвет текста добавляется только для того, чтобы отобразить текст 

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>
0 голосов
/ 25 марта 2019

сначала установите 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>
0 голосов
/ 25 марта 2019

Пожалуйста, проверьте здесь: 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...