Размытие под текстом в HTML

12
K
На сайте с 10.01.2015
Offline
110
4359

Всем доброго времени суток! На сайте WP превью записей настроено таким образом, что на изображении (миниатюре записи) находится текст. Само изображение немного затемнено, но вот уже несколько дней я пытаюсь реализовать это другим способом.

Я хочу сделать так, чтобы все было точно также как и сейчас, но чтобы под текстом было размытие (blue) и само размытие было черного цвета. Тут-то и возникает главная проблема. Если сделать размытие, то и текст становится размытым.

В общем как я понял, нужно чтобы в под Div текста было все размыто и затемнено. В Photoshop сделал пример того, как это все должно выглядеть. Ссылку на картинку прилагаю. Как это можно реализовать?

Mad_Man
На сайте с 10.11.2008
Offline
162
#1

http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Но ваша задача решается банальным слоем на фоне.

K
На сайте с 10.01.2015
Offline
110
#2

В том то и дело, что если на слое текста сделать размытие, то размывается только текст, а само изображение оказывается не размытым. Соответственно добавлять лишний слой также нет никакого смысла. В этом вся загвоздка.

Mad_Man
На сайте с 10.11.2008
Offline
162
#3
Kepus:
В том то и дело, что если на слое текста сделать размытие, то размывается только текст, а само изображение оказывается не размытым. Соответственно добавлять лишний слой также нет никакого смысла. В этом вся загвоздка.

Шта?

Пример в студию.

K
На сайте с 10.01.2015
Offline
110
#4

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

Мне нужно размыть именно ту часть изображения, которая на фото черная. Все изображение сделать размытым не проблема.

Mad_Man
На сайте с 10.11.2008
Offline
162
#5

Вы ссылку на пример дайте, а не скриншот. Вангование по картинке нынче не в моде. Я вангую, что гуглить вы не пытались\не умеете, ибо давно попали на нечто вроде http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ (втыкать в описание под заголовком "Fail").

K
На сайте с 10.01.2015
Offline
110
#6

В гугле провел много времени, но ничего путного не нашел, кроме пары-тройки JS скриптов.) www.AppleStage.com

---------- Добавлено 27.05.2015 в 01:04 ----------

Попытался сделать все. Не получается. Данный способ работает только если какая-то конкретная картинка на Background стоит, а если это миниатюра, то ничего не работает.

GarryMan01
На сайте с 16.05.2015
Offline
25
#7

Kepus, вам на Background нужно просто необходимый цвет прописать с необходимой прозрачностью, и все

а текст должен быть отдельно

White SEO rules!!! Usability, all CMS!!! SeoVit.ru (http://seovit.ru/) Оптимизация, продвижение сайтов, контекстная реклама. Разработка, доработка сайтов, прототипирование, создание лендингов.
K
На сайте с 10.01.2015
Offline
110
#8

Мне нужно размытие сделать, а не только цвет прописать.

GarryMan01
На сайте с 16.05.2015
Offline
25
#9

rgba(28, 119, 60, 0.35);

K
На сайте с 10.01.2015
Offline
110
#10
GarryMan01:
rgba(28, 119, 60, 0.35);

Это не дает размытия, как я уже писал.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий