Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
Karmisha
2 / 2 / 1
Регистрация: 04.07.2013
Сообщений: 27
1

Размытие фонового изображения

14.07.2016, 13:55. Просмотров 2160. Ответов 7
Метки нет (Все метки)

Здравствуйте! Все знают, что для размытия есть filter: blur, а для контента svg-маска. Да, это все отлично. Но вопрос в следующем, у меня есть такая архитектура:
HTML5
1
2
3
4
<div class="man bg-img">
    <p>Lorem ipsum</p>
    <a href="#" class="category-link"></a>
</div>
У блока .man есть background-image, при наведении на блок нужно размыть именно background-image, а не весь блок .man вместе с содержимым. Ваши предложения?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.07.2016, 13:55
Ответы с готовыми решениями:

Размытие фонового изображения
Здравствуйте. Нужно, чтобы фон был размыт как на картинке. Как это реализовать?...

Размытие изображения при анимации
Здравствуйте. Подскажите, пожалуйста, как решить следующую проблему. На...

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

Масштабирование фонового изображения
после того как кончается фон начинается белая область,это значит фоновое...

изменение фонового изображения
Здравствуйте. я владелец сайта на ucoz. сделал у себя в css статичный фон -...

7
mrtoxas
Модератор
Эксперт HTML/CSS
2637 / 1949 / 1210
Регистрация: 12.07.2015
Сообщений: 5,184
Записей в блоге: 3
14.07.2016, 14:27 2
Размытие фонового изображения
0
Karmisha
2 / 2 / 1
Регистрация: 04.07.2013
Сообщений: 27
14.07.2016, 14:34  [ТС] 3
Вопрос не закрыт. Условия не те. Мне нужно размыть background-image а не слой
0
mrtoxas
Модератор
Эксперт HTML/CSS
2637 / 1949 / 1210
Регистрация: 12.07.2015
Сообщений: 5,184
Записей в блоге: 3
14.07.2016, 14:44 4
Photoshop в помощь. Стиля background-image-blur нет. А если посмотреть на caniuse, то ясно, что и вообще, c blur'ом лучше не торопиться
0
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
14.07.2016, 14:45 5
Вам верный совет дали) Просто нужно присвоить фон отдельному блоку, который будет растянут на 100% ширины и высоты блока .man через абсолютное позиционирование...
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
14.07.2016, 14:52 6
Karmisha,
HTML5
1
2
3
4
<div class="man bg-img">
    <p>Lorem ipsum</p>
    <a href="#" class="category-link">text</a>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.man{
  width:400px;
  height:400px;
  position:relative;
}
.man:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background-image:url("https://pbs.twimg.com/profile_images/427531259770703872/E01dTaRl_400x400.jpeg");
  opacity:1;
  transition:opacity .5s;
}
.man:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-2;
  background-image:url("https://pbs.twimg.com/profile_images/427531259770703872/E01dTaRl_400x400.jpeg");
  -webkit-filter:blur(5px);
  filter:blur(5px);
}
.man:hover:before{
 opacity:0;
}
https://jsfiddle.net/shakalaka/7pvztzhr/
0
Karmisha
2 / 2 / 1
Регистрация: 04.07.2013
Сообщений: 27
14.07.2016, 15:20  [ТС] 7
Спасибо, уже разобрался. Тоже через псевдоэлемент :after
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}
 
div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
Может кому-то полезно будет. Тема закрыта.

Добавлено через 38 секунд
aj17, смотрите описание. Мне не нужно было отдельный слой делать. В том и была задача.
0
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
14.07.2016, 15:55 8
Цитата Сообщение от Karmisha Посмотреть сообщение
смотрите описание. Мне не нужно было отдельный слой делать. В том и была задача.
ВЫ все равно его сделали) через псевдоэлемент)
0
14.07.2016, 15:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2016, 15:55

Полупрозрачность фонового изображения
Всем привет. Поставил таблице изображение фоном. Есть ли возможность что-бы это...

повторение фонового изображения
народ как сделать повторение фонового изображения repeat-x это по иксу а как...

Адаптация фонового изображения
При адаптации под движок, нужно будет разрезать фон для того, чтобы он был...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru