» »

Изображение и текст на прозрачном фоне

Изображение и текст на прозрачном фоне

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

Не чего особо сложного нет, нам нужны стили и ссылки на изображение. Ведь мы выстраиваем конструкцию на первом снимке, которую изначально оформляем как можно красивей, ведь она несет основную информацию. Здесь все сделано по-минимальному, а точнее без разного оформление, так как обводы и тени вы можете самостоятельно прописать, и где-то от себя добавить, ведь много зависит от тематического наклонение ресурса.

Как пример, вот так получится, но также есть demo страница, где в темном стиле создан обзор прозрачного вида.

передать текст или изображение прозрачным фоном с помощью CSS

Установка:

HTML

Код
<p>Здесь идет описание, что безусловно оригинально смотрится на прозрачном фоне.
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/hPLqUtN.jpg" alt="" />
</p>

CSS

Код
p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #efeff3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .7;
  z-index: -1;
}

body {
  background: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 8px;
  margin: 10% auto;
  font-family: arial, serif;
  color: #1a1a1b;
}
img {
  display: block;
  max-width: 83%;
  margin: 15px auto;
}

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

Демонстрация
2019-05-06 Загрузок: 1 Просмотров: 392 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar