Как применить эффект размытия к фоновому изображению в Blogger?

Я пытался добавить эффект размытия к своим сообщениям, но главное, что размывается, является основным содержанием сообщения (рис. http://i.gyazo.com/9d94d2be5dc3f3ada982564aa212336e.jpg). Любая идея, как настроить таргетинг на фоновое изображение, а не на контент?Как применить эффект размытия к фоновому изображению в Blogger?

код, я использую в данный момент:

<script type="text/javascript"> 
var image = document.querySelector('.post-body img').src; 
var target = document.body; 
target.style.backgroundImage = "url(" + image + ")"; 
target.style.backgroundSize = "cover"; 
document.body.style["background-attachment"] = "fixed"; 
</script>

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

Кроме того, есть ли возможность добавить Blur.js в блоггер или это только для Wordpress? Если да, я хотел бы знать, как это сделать?

Заранее спасибо.

источник

2015-02-25 Marcus Lutel

Вы можете попробовать использовать этот CSS 3 тег:

filter: blur(5px);

Вы можете найти в документации MDN здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

источник

2015-02-25 11:00:17

Это один я. Это размывает содержимое, а не фоновое изображение. –

Не могли бы вы изменить фоновое изображение для тега img? См. Мой пример здесь, в jsfiddle, и проверьте, является ли это то, что вы хотите: http: // jsfiddle.net/5ddsj2ap/ –

Изменил его, и он сломал код. Похоже, что это не сработает. Фоновое изображение = пост-тело img. Это означает, что любая фотография, которую я использую в своем сообщении, будет автоматически в качестве фона. Итак, как я могу сделать эффект размытия автоматически? –

Вы можете сделать это на Blogger без использования JS или CSS.

Загрузите свое изображение в сообщение Blogger так, как если бы вы его разместили в статье.
Скопируйте URL изображения и вставить его в body CSS вот так:
```
body { 
    background-image: url('YOUR IMAGE URL HERE'); 
} 
```
Заменить /s-1600/ часть URL с /s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/

Примечание: Вы можете настроить радиус размытие путем возиться со вторым номером после Soften= (в приведенном выше случае, 20).

Преимущество этого в том, что оно легче по коду и полностью совместимо с каждым устройством и браузером, способным загружать изображение!

источник

2015-06-21 14:25:56

ваш ответ написан с помощью CSS, поэтому он не «без css» ... – funilrys

@funilrys Да, я имел в виду размытие, не устанавливающее фоновое изображение. –

Я работал над this и видел этот вопрос. Итак, вот предложение.

<script type="text/javascript"> 

    function showBackground() { 
     document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundImage = "url('http://backgroundImage.jpg')"; 
     document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundPosition = "center center"; 
     document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundRepeat = "no-repeat"; 
     document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundAttachment = "fixed"; 
     document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(5px)"; 
    } 

    window.onload = showBackground(); 


</script>

Объяснение

Как я использовал простой шаблон в это время, я заметил, что стандартный шаблон имеет класс с именем body-fauxcolumn-outer, который используется, чтобы установить цвет фона.

Так что я отвечу на этот вопрос here, чтобы ответить на этот вопрос.

Я просто добавил следующее, чтобы исправить размытие, как вы можете видеть на изображении ниже.

document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(15px)";

источник

2016-12-30 18:43:54 funilrys

Как применить эффект размытия к фоновому изображению в Blogger?

ответ

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