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

Тема в разделе "Верстка", создана пользователем COLOBOCman, 5 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. COLOBOCman

    COLOBOCman Постоялец

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

    Буду очень благодарен за любые идеи
     
  2. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    360
    Симпатии:
    243
    Под блок (z-index) добавить дополнительный блок с таким же фоном.. и его уже размывать.
     
    COLOBOCman нравится это.
  3. COLOBOCman

    COLOBOCman Постоялец

    Регистр.:
    26 апр 2013
    Сообщения:
    122
    Симпатии:
    30
    Спасибо за ответ, но такой способ будет работать если будут заранее известны координаты размещения, и размер блока, более динамичные решения существуют?
     
  4. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    Можно попробовать с помощью этого метода. Скопировать блок и добавить ему класс, где надо указать z-index и эффект размытия. Но это скорее всего будет работать, если у блока стоят position:absolute или position:fixed, если стоит position:relative, то вставлять этот блок в какой-то элемент с position:absolute, а там уже подгонять.
     
    COLOBOCman нравится это.
  5. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    360
    Симпатии:
    243
    Возможно, подойдёт вариант вместо blur-а использовать размытый фон похожего цвета (рисунок или заливка однотонная) с промежуточным значением opacity?
    Если нет.. то всё тот же вариант может подойти с расчётом координат на JS..
    Хотя, на мой взгляд, тоже не айс - должно быть что-то попроще..
     
    COLOBOCman нравится это.
  6. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    ну а если сделать две картинки - простую и 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>