Как применить фильтр размытия к фоновому изображению

В этой статье мы покажем, как легко и быстро применить фильтр размытия к фоновому изображению.

Следуйте этим шагам и создайте для вашей страницы фоновое изображение с эффектом размытия.

Начните с создания div элемента с классом .image.

.image {
background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");

Потом примените стиль к классу с помощью CSS свойств.

Установите высоту изображения с помощью свойства height, после чего укажите положение изображения с помощью свойства background-position.

.image {
height: 100%; 
background-position: center;
)

Здесь мы установили значение "center".

После применения background-position, сделаете изображение неповторяющимся с помощью установления свойства background-repeat в значение "no-repeat".

.image {
background-repeat: no-repeat;
)

Установите свойство background-size в значение "cover", которое увеличивает масштаб фонового изображения таким образом, чтобы оно заполняло фоновую область.

.image {
background-size: cover;
)

А теперь нам потребуется использовать свойство filter, чтобы изображение стало размытым. Свойство filter имеет значение blur, которое применяет размытие для изображения. Указывается в px. Чем больше значение, тем более размытым будет изображение. Здесь мы установили 5px.

.image {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
)

Не забудьте вместе со свойством filter добавить -Webkit- для Safari, Google Chrome и Opera (новые версии), -ms- для Internet Explorer, -Moz-для Firefox, -o- для более старых версий Opera. Посмотрим, что получилось:

Посмотрим, что получилось:

.image {
background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
height: 100%; 
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

А сейчас создадим текст, который будет применен к фоновому изображению.

Начните с создания элемента div с классом .image.

.text { 
color: #eeeeee;
font-weight: bold;
border: 3px solid #cccccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}

Давайте увидим результат:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body, html {
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      }
      h2{
      font-size:30px;
      }
      .image {
      background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(5px);
      -webkit-filter: blur(5px); 
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      }
      .text { 
      color: #eeeeee;
      font-weight: bold;
      border: 3px solid #cccccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      padding: 20px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
    <div class="text">
      <h1>W3DOCS</h1>
      <h2>Размытое фоновое изображение</h2>
      <p>Сниппет</p>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример с размытым фоновым изображением:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .background-image {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 1;
      display: block;
      background-image: url(" /uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
      width: 1200px;
      height: 800px;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
      }
      .content {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 9999;
      margin-left: 20px;
      margin-right: 20px;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div class="background-image"></div>
    <div class="content">
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
    </div>
  </body>
</html>

Попробуйте сами!

Как применить фильтр размытия к фоновому изображению

Пример

Пример

Похожие ресурсы