Как сделать текст поверх изображения? [требует правки]

285

05 сентября 2017, 08:33

Нужно сделать так, чтобы определенный текст разного размера (заголовки статей допустим) можно было разместить поверх картинки.

На пример, как на сайте onedio.ru, где на главной странице заголовки статей находятся на картинке поста.

Как такое можно сделать? Дайте материал по теме, а лучше фрагмент кода для реализации задуманного.

Answer 1

.block { 
  position: relative; 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 300px; 
  height: 200px; 
  overflow: hidden; 
} 
 
.block > span { 
  position: absolute; 
  bottom: 0px; 
  width: 100%; 
  background-color: rgba(0,0,0,.2); 
  padding: 8px; 
  color: white; 
  text-shadow: 0px 0px 15px black; 
  box-sizing: border-box; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
}

<div class="block" style="background-image:url(https://cdn.allwallpaper.in/wallpapers/1600x1200/4815/dandelions-flowers-macro-nature-white-1600x1200-wallpaper.jpg)"> 
  <span>Very very very long description text exiting of block visible area</span> 
</div>

Answer 2

position relative для контейнера, position absolute - для элементов, которые нужно наложить на другие объекты в этом контейнере