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

297

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>