blur without background image

Question

Я создаю тему (для меня) для Cinnamon, и я хочу получить эффект размытия на панели корицы, но я не знаю, как это сделать. Я знаю, как получить пятно на этом:

.moreblur { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 

 
    display: block; 
 
    background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg); 
 
    width: 1200px; 
 
    height: 800px; 
 

 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px); 
 
}

<div class="moreblur"></div>

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

Answer 1

Если вы не можете изменить структуру HTML, чтобы добавить новый div, на который будут добавлены background-image и blur. вы могли бы использовать pseudo-element как :before

смотри ниже фрагмент кода

.moreblur { 
 
    position: fixed; 
 
    width: 1200px; 
 
    height: 800px; 
 
} 
 

 
.moreblur:before { 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    display: block; 
 
    background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg); 
 
    -webkit-filter: blur(10px); 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px); 
 
    position: fixed; 
 
    width:100%; 
 
    height:100%; 
 
    content:""; 
 
    z-index:-1; 
 
}

<div class="moreblur"> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    <p> 
 
    I am NOT Blured 
 
    </p> 
 
    
 
</div>

дайте мне знать, если это помогает