[HELP] CSS Filter Blur при наложении

COLOBOCman

COLOBOCman

Мастер
Регистрация
25 Апр 2013
Сообщения
122
Реакции
30
Как воздейстовать на один блок только в месте перекрытия его вторым блоком. Например у нас есть фон, а на фоне есть блок, и задача размыть фон именно под блоком.

Буду очень благодарен за любые идеи
 
Под блок (z-index) добавить дополнительный блок с таким же фоном.. и его уже размывать.
 
Спасибо за ответ, но такой способ будет работать если будут заранее известны координаты размещения, и размер блока, более динамичные решения существуют?
 
Можно попробовать с помощью Для просмотра ссылки Войди или Зарегистрируйся метода. Скопировать блок и добавить ему класс, где надо указать z-index и эффект размытия. Но это скорее всего будет работать, если у блока стоят position:absolute или position:fixed, если стоит position:relative, то вставлять этот блок в какой-то элемент с position:absolute, а там уже подгонять.
 
COLOBOCman написал(а):
Спасибо за ответ, но такой способ будет работать если будут заранее известны координаты размещения, и размер блока, более динамичные решения существуют?
Нажмите для раскрытия...
Возможно, подойдёт вариант вместо blur-а использовать размытый фон похожего цвета (рисунок или заливка однотонная) с промежуточным значением opacity?
Если нет.. то всё тот же вариант может подойти с расчётом координат на JS..
Хотя, на мой взгляд, тоже не айс - должно быть что-то попроще..
 
ну а если сделать две картинки - простую и blur, ну и сделать как-то наподобие:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

        #wrapper{
            width: 500px;
            height: 500px;
            background: url(image.png) center no-repeat;
        }

        #fly{
            position: absolute;
            overflow: hidden;
            width: 200px;
            height: 200px;
            left: 50px;
            top: 50px;
            /* смещение фона равно смещениям блока влево и вправо, умноженным на -1 */
            background: url( image-blur.png ) -50px -50px no-repeat;
        }
    </style>
</head>
<body>
    <div id="wrapper"></div>
    <div id="fly"></div>
</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху