如何仅模糊和透明背景而不是 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;
}

如何仅模糊和透明背景而不是 jgrowl 通知中的内容

How to blur and transparant only background and not content in jgrowl notification

html

css

php

jquery

jgrowl