如何在模糊div上打印模糊内容

Question

我有一个网页，其中黑色矩形是背景壁纸上的背景。黑色矩形模糊不清。我想在这个模糊的黑色矩形上打印一个非BLURRED内容，例如表格和缩略图。

在此示例中，我在模糊的黑色矩形的顶部打印了hello。但你好也是模糊的。我怎么不模糊H3标签？我有我正在使用的HTML和CSS。

以下是代码。

<div class="blackRectangle"> 
    <div class="noBlur"> 
     <h3>HELLO</h3> 
    </div> 
</div> 


.blackRectangle { 
background-color: black; 
opacity: .7; 
top: 15px; 
width: 1870px; 
height: 900px; 
position: absolute; 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
filter: blur(5px); 
} 


.noBlur { 
    top: 30px; 
    width: 1870px; 
    height: 900px; 
    position: absolute; 
    -webkit-transform: translateZ(0); 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -o-filter: blur(0px); 
    filter: blur(0px); 
} 

Answer 1

您可以在z-index的-1和z索引1.非模糊rectabgle使用一个模糊的长方形所以不模糊矩形将被放置在模糊rectange，因此它的内容将被清晰地显示。

HTML：

<div class="blurredRectangle"> 
    </div> 

    <div class="nonBlurredRectangle"> 
     <div class="noBlur"> 
     <center> <h3>HELLO</h3></center> 
     </div> 
    </div> 

CSS：

.blurredRectangle { 
     background-color: black; 
     opacity: .7; 
     top: 15px; 
     width: 1870px; 
     height: 900px; 
     position: absolute; 
     -webkit-filter: blur(5px); 
     -moz-filter: blur(5px); 
     -o-filter: blur(5px); 
     filter: blur(5px); 
     z-index: -1; 
     } 

    .nonBlurredRectangle { 

     top: 15px; 
     width: 1870px; 
     height: 900px; 
     position: absolute; 
     z-index: 1; 

    } 

    .noBlur { 
      top: 30px; 
      width: 1870px; 
      height: 900px; 
      position: absolute; 
      -webkit-transform: translateZ(0) !important; 
      -webkit-filter: blur(0px); 
      -moz-filter: blur(0px); 
      -o-filter: blur(0px); 
      filter: blur(0px); 
    }