如何在jgrowl通知中模糊和透明僅背景而不是內容

Question

我試過模糊和透明jgrowl通知背景，但只是透明的作品。當模糊內容也模糊。內容意味着文本通知。我不想背景透明和模糊，不滿足。 THIS jsfiddle

CSS：

.test{ 
background-color:rgba(102, 204, 153,0.95); 
color:#fff; 
font-weight:bold; 
border:1px #fff solid; 
filter: blur(5px) ; 
} 

JGROWL：

<script type="text/javascript"> 
    $(function() { 
    $.jGrowl("<p class='upper'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i> <?=$row['NTFY_TTL'];?></p><?=$row['NTFY_DESC'];?><br> <small>Posted <?=$row['BEG_DT'];?></small>", { 
     theme: 'test', 
     position: 'top-right', 
     life: 3000 
    }); 
    }); 
</script> 

THIS jsfiddle

Answer 1

有可能是一個更好的辦法，但或者可以用空div的幫助，請檢查需要的瀏覽器來完成兼容性實施前

jsfiddle demo

HTML

<div class="test"> 
<span class="test2"> 

    </span> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quod atque ipsam cupiditate eum, debitis illo repudiandae aperiam dolorum quae neque praesentium, quis vero iure distinctio natus quisquam consequuntur officiis. 



</div> 

CSS

.test { 
    position: relative; 
    z-index: 10; 
} 

.test2{ 
    background-color:rgba(102, 204, 153,0.95); 
    color:#fff; 
    font-weight:bold; 
    border:1px #fff solid; 
    filter: blur(5px) ; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    z-index: -1; 
}