Наложение частичного гауссовского размытия на фоновое изображение

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

Что мне нужно сделать, это применить размытие кросс-браузера над этим изображением только на части левой стороны.

Таким образом, это создает видимость размытия изображения. Если я применил его к изображению, тогда, когда разрешение экрана изменит размер, так и размер размытия.

Любая помощь будет отличной.

Приветствия

источник

2010-05-04 Andy

В CSS или на стороне сервера в изображении? Я предполагаю, что первое? –

Css было бы здорово, хотя на этом этапе я бы ничего, кроме всего прочего. Создав размытие (скажем, 250 пикселей в ширину) в левой части любого фонового изображения, я могу разместить над ним меню. Это идея. – Andy

Я вижу ... Если это нужно изменить, CSS будет вашим единственным вариантом. Существует определенно нет * одного * кросс-браузерного способа сделать это, но я бы удивился, если бы CSS3 не мог что-то предложить в этом отделе. –

Вы ищете что-то вроде этого http://css-tricks.com/blurry-background-effect/

источник

2010-05-04 19:19:33 Mark

просто смотря на это сейчас, выглядит интересно ... – Andy

Похоже, что единственный способ сделать это - загрузить два изображения. – Andy

Это все еще облом, потому что я применяю его для этого эффекта: http://css-tricks.com/perfect-full-page-background-image/ – Andy

Я не думаю, что есть что-то в этом роде. Особенно, если кросс-браузер также означает IE6.

Однако вы можете создать размытую и не размытую версию изображения и показать размытую версию только там, где вы хотите (обрезаны). Если вы знаете, что я имею в виду ... :)

источник

2010-05-04 19:17:06

Не беспокоиться о том, что ie6, просто ie7,8 и другие – Andy

@Jongsma @ Andy достаточно забавно, IE в этом случае имеет функцию, чтобы сделать это с 5,5, в то время как FF3.6, Opera и Chrome - нет, насколько мне известно по крайней мере :) –

mmm Я вижу, что вы имеете в виду, что обычно не будет плохой идеей, но опять же, потому что изображение растягивается на фоне, изображение, которое было бы зеркало. Это выглядело бы странно. но хорошая идея! спасибо за вход. – Andy

Вы можете абсолютно поместить div, который имеет ширину 50% и высоту 100%. Затем сделал фон div около 50% прозрачного белого фона. Это может сделать трюк.

источник

2010-05-04 19:17:38 codedude

Это не настоящее размытие, хотя. –

Было бы также бледно изображение ... приятно подумать, однако ... – Andy

Беглый взгляд говорит мне, что для этого нет CSS3. Неужели это не может быть правдой? Кто-нибудь?

Для обозревателя Internet существует blur filter. Пример с сайта MSDN:

<DIV STYLE="width:100%; filter: 
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) 
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2) 
    progid:DXImageTransform.Microsoft.Wheel(duration=3);"> 
Blurry text with smudge of gray.</div>

источник

2010-05-04 19:17:45

Наложение частичного гауссовского размытия на фоновое изображение

ответ

Смежные вопросы