0

Вот как на изображений,только в черном блоке было все размыто (то есть за ним) что бы на этот блок можно было ещё текст наложить и картинки (без размытия )

Можно как нибудь это осуществить в css или JQure ?

к слову Задний фон в классе body

5
  • 2
    Подсказка: внутрь дива поместить эту же картинку, но со смещением, чтоб казалось будто он прозрачный и уже на него filter: blur(). А так, не существует css свойств для размытия картинки позади дива. 31 окт 2018 в 14:17
  • поддерживаю выше сказанное! Установить одинаковый фон , Фон квадрату я задавал фиксированным background-repeat: no-repeat; background-attachment: fixed; filter: blur(3px); 31 окт 2018 в 15:22
  • 1
    @MishaSaidov "А так, не существует css свойств для размытия картинки позади дива" Я и caniuse.com с Вами не согласны. Загвоздка в том, что не каждый юзер догадается/осмелится включить в настройках необходимый флажок (в Хроме, например - chrome://flags/#enable-experimental-web-platform-features). Хотя, в Safari и Edge уже включено по умолчанию. При включенном флажке можно посмотреть на красоту
    – UModeL
    31 окт 2018 в 18:22
  • @UModeL Я видимо жёстко отстал от индустрии, не стоит больше позволять себе такие смелые высказывания) 31 окт 2018 в 20:55
  • @MishaSaidov отстанешь тут - уже сколько лет поддержку backdrop-filter не могут реализовать. Уже и не надеется никто))
    – UModeL
    31 окт 2018 в 21:01

1 ответ 1

0

Как-то так?

.wrapper {
  max-width: 100%;
  position: relative;
}
.wrapper img {
  width: 100%;
  height: auto
}
.wrapper .text {
  position: absolute;
  top: 50px;
  right: 100px;
  width: 100px;
  height: 100px;
  color: #fff;
  padding: 30px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px)
}
<div class="wrapper">
  <img src="https://i.stack.imgur.com/ThkkP.jpg"/>
  <div class="text">Какой-то текст</div>
</div>

Но с поддержкой так себе

Есть вариант с svg-filter codepen.io

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.