Прозрачный фон CSS на изображении

Прозрачный фон CSS на изображении

Прозрачный фон CSS на изображении

Недавно, на целевой странице одной западной компании, я увидел интересный прозрачный фон CSS на изображении. Это похоже на Гауссовое размытие.

Прозрачный фон CSS на изображении

Притягательный эффект правда? Для бородатых Гуру CSS этот эффект возможно очевиден, но для начинающих, будет весьма полезно узнать, как применить размытый полупрозрачный фон CSS на изображении. Критицизмы приветствуются. Пишите что думаете в комментариях.

 

Начало

Давайте не будем засовывать в контейнер сложную конструкцию, но создадим прилично смотрящийся текст, с призывом и ссылкой:

<style type="text/css">
#bg {
  background-image: url('freelancer-desk.jpg');
  background-position: center top;
  background-size: 1080px auto;
  padding: 70px 90px 120px 90px;
}
 
#search {
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}
 
#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }
</style>
 
<div id="bg">
  <div id="search">
    <h2>Прозрачный фон CSS на изображении</h2>
    <h5><a href="#">Призыв или ссылка »</a></h5>
  </div>
</div>

Легкий материал. Мы просто добавили к коробке частично прозрачный фон с помощью CSS.

Прозрачный фон CSS на изображении

Призыв или ссылка »

Размытие

Не плохо, но немного размытости и было бы действительно классно. Давайте посмотрим, как добавить размытие. Chrome,Webkit и Blink имеют CSS фильтр размытия, а Firefox использует SVG.

#search {
  -webkit-filter: blur(10px); /* Chrome, Opera ...  */
  filter: url('blur.svg#blur'); /* http://interzarabotok.ru/media/blur.svg */
  filter: blur(10px); /* Firefox 35+ */
}

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

 

Финал

Оказывается, что — то очень похожее может быть сделано в CSS . В дополнение к исходному фоновому слою, мы можем применить фоновое изображение #search. Будет видна только область в поле #search. Мы размоем этот слой, а затем поместим черную полупрозрачную коробочку и его содержимое поверх изображения.

Круто, не так ли? Возможно, есть более простое решение, создать прозрачный фон CSS на изображении, но я не думаю, что это этот вариант так уж плох. Вот окончательный CSS и разметки с некоторыми благостями типа @media запросов придачу:

<style type="text/css">
#bg , #search-bg {
  background-image: url('http://interzarabotok.ru/images/Prozrachnyj-fon-CSS-na-izobrazhenii-2.svg');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}
 
#bg {
  background-position: center;
  padding: 40px 90px 40px 90px;
}
 
#search-container {
  position: relative;
}
 
#search-bg {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;
 
  background-position: center -70px;
 
  -webkit-filter: blur(10px);
  filter: url('http://interzarabotok.ru/images/blur.svg');
  filter: blur(10px);
}
 
#search {
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}
 
@media (max-width: 600px ) {
  #bg { padding: 10px; }
  #search-bg { background-position: center -10px; }
}
 
#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }
</style>
 
<div id="bg">
 <div id="search-container">
  <div id="search-bg"></div>
  <div id="search">
   <h2>Прозрачный фон CSS на изображении</h2>
   <h5><a href="http://interzarabotok.ru/prozrachnyj-fon-css-na-izobrazhenii">Призыв или ссылка »</a></h5>
  </div>
 </div>
</div>
Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *