Как поместить несколько прямоугольников с текстом поверх изображения с помощью CSS? - PullRequest
Новая
       1

Как поместить несколько прямоугольников с текстом поверх изображения с помощью CSS?

0 голосов
/ 19 февраля 2019

У меня есть изображение, и поверх него я должен поместить следующую полосу, как показано на рисунке, где у вас будет текст и значок с Fontawesome.Проблема в том, что независимо от того, сколько я ставлю z-index и так далее, он не работает для меня.

Sample image

Я хотел бы знатькак сделать это эффективно.Спасибо!

Редактировать:

Я пробовал: https://jsfiddle.net/h82jy7e4/3/

HTML 

<html>

<img class="image" src="http://www.ecosdelcombeima.com/sites/default/files/1_345.jpg">
<div class="frange">

</div>
</html>

CSS

.image{
width: 641px;
height: 332px;
z-index: 0;
}

.frange{
  width: 641px;
  height: 34px;
  background-color: #4a4a4a;
  z-index: 3;
  margin-top: -20px;
}

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019 
.image{
    width: 641px;
    height: 332px;
    position: relative;
}`

.frange{
    width: 641px;
    height: 34px;
    background-color: #4a4a4a;
    position: absolute;
    bottom: 55%;
}

Также, установив влево, вправо, вверх, вы можете переместить блок.

0 голосов
/ 19 февраля 2019

Может быть, вы можете попробовать это, вам нужно определить контейнер для изображения и нижней панели, и установить position:absolute на нижней панели и position: relative на контейнере;затем вы можете добавить еще несколько правил, чтобы получить желаемый вид;

Я добавил зеленую рамку, чтобы вы могли видеть, что изображение на самом деле «позади» нижней полосы 

.imagebox {
  position: relative;
  display: inline-block;
}

img {
  border: 1px solid green;
}

.bottom-bar {
  position: absolute;
  bottom: 0;
  background-color: grey;
  width: 100%;
  display: flex;
  align-items: center;
}

.bottom-bar button {
  background-color: red;
  border: 1px solid red;
  padding: 5px;
}
<div class="imagebox">
  <img src="https://via.placeholder.com/400x250">
  <div class="bottom-bar">
    <button>icon</button>
    <div>Here goes the text</div>
  </div>
</div>
0 голосов
/ 19 февраля 2019

Ваш код уже работает, вам просто нужно добавить значок и текст внутри вашего div.Прямо сейчас у вас есть пустой серый прямоугольник внизу изображения.

Также обратите внимание, что z-index ничего не делает, если элемент не позиционируется.Вы можете удалить оба z-индекса из своего кода, так как они не нужны.Вы можете прочитать больше об этом здесь: https://www.w3schools.com/cssref/pr_pos_z-index.asp

РЕДАКТИРОВАТЬ: Я считаю, что это решение, которое вы ищете.

Внутри вашего div, вам нужно создать промежуток для логотипа так,он не переходит на новую строку, и поэтому вы можете добавить красный фон для логотипа, не меняя серый фон для остальной части div.Убедитесь, что вы ссылаетесь на Font Awesome, иначе значок не появится. 

<span><i class="fas fa-images"></i></span>
<p>Selección colombia</p>

Для форматирования ваш CSS будет выглядеть так: 

.frange{
    width: 641px;
    height: 40px;
    background-color: #4a4a4a;
    margin-top: -40px;
    position: absolute;
    color: white;
}

.fa-images{
    font-size: 20px;
    padding-top: 10px;
}

span{
    background-color: red;
    width: 40px;
    height: 40px;
    text-align: center;
    float: left;
}

p{
    margin-top: 12px;
    margin-left: 50px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...