Question

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

在这个例子中，我在模糊的黑色矩形上面打印你好。但你好也很模糊。我怎么不模糊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-index 1处使用非模糊的矩形。因此，非模糊的矩形将放置在模糊的矩形上，因此其内容将清晰显示。

<强> 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);
     }

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

1 个答案: