Надпись и изображения перекрываются

Будучи очень наивным в HTML и CSS, я не могу этого сделать, кроме как создать изображение. Итак, как я могу создать текст, перекрывающий изображение, с фоновым цветом?

Подробно:

У меня есть квадратное изображение, и я хочу добавить перекрывающийся текст. Этот текст должен иметь цвет фона, охватывающий все изображение, и должен быть центрирован как по вертикали, так и по горизонтали, как на картинке.

Как я могу сделать это в HTML+CSS? Я хотел бы избежать создания изображений.

Спасибо!

Образец


html css overlapping
person senseiwa    schedule 14.12.2015    source источник
comment
Тааак... что ты пробовал?   -  person BuddhistBeast    schedule 14.12.2015
comment
Хотя вы, возможно, и не пробовали CSS, вы должны были определенно составить базовый HTML-код, чтобы приступить к реализации этого. Итак, какой у вас HTML? Какие попытки предприняли вы предприняли? SO — это не бесплатный сервис для написания кода, он предназначен для помощи людям в решении проблем программирования, с которыми они столкнулись. Пытаться правильно искать решение, пытаться что-то реализовать, а когда и если это не сработает? Затем вернитесь и попросите о помощи, показав соответствующий минимально воспроизводимый код примера, имеющий прочтите руководство Как задать вопрос.   -  person David says reinstate Monica    schedule 14.12.2015

Ответы (4)


arrow_upward
1
arrow_downward

Я использовал образец изображения пингвина.

HTML-код-

<div class="imageShadow textCenter">
 <h2>Hello</h2>
</div>

Код CSS-

.imageShadow {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ),
 url('http://amolife.com/image/images/stories/Animals/penguins%20(8).jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.textCenter h2 {
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

И вот скрипка на случай, если вы захотите увидеть ее в действии: http://jsfiddle.net/SarhadSalam/wut8gtwq/

person Sarhad Salam    schedule 14.12.2015
comment
Можно ли удалить изображение из CSS и переместить его в тег img? - person senseiwa; 15.12.2015

arrow_upward
0
arrow_downward

Сначала создайте окружающий контейнер, содержащий только ваше изображение. Затем создайте еще один DIV внутри этого контейнера, который имеет

position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
text-align: center;

Добавьте также желаемые background-color, font-size и color и попробуйте разные значения непрозрачности.

person Johannes    schedule 14.12.2015

arrow_upward
0
arrow_downward

Я предполагаю, что вы хотите создать изображение с наложением при наведении. Вы можете сделать это таким образом.

h3, p {
  margin: 0;
}

.box {
  text-align: center;
  position: relative;
  float: left;
}

.box-hover {
  background: white;;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s all ease-in;
}

.box:hover .box-hover {
  opacity: 0.9;
}
<div class="box">
  <img src="http://placehold.it/350x150/000000/ffffff">
  <div class="box-hover">
    <div class="box-hover-content">
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, <br> consectetur adipisicing.</p>
    </div>
  </div>
</div>

person Nenad Vracar    schedule 14.12.2015
comment
Нет, просто статичное изображение. Но подписи должны иметь фон, как на изображении, и располагаться по центру его фонового прямоугольника. - person senseiwa; 15.12.2015

arrow_upward
0
arrow_downward

Попробуй это

position: absolute;
padding :30px;     /*(approx make change according to the page alignment for 
                     image)*/
text-align: center;
background-color:#CCC;
z-index:1;   /*( if no z-index is given for the previous image, else give more 
              value than that)*/
person vinoth    schedule 14.12.2015