Javascript 如何在模糊div上打印无模糊内容
我有一个网页,其中一个黑色矩形是背景,背景是壁纸。黑色矩形模糊了。我想在这个模糊的黑色矩形上打印非模糊内容,如表格和缩略图 在本例中,我将在模糊的黑色矩形上打印hello。但是问候也很模糊。如何不模糊H3标签?我有我正在使用的HTML和CSS 下面是代码Javascript 如何在模糊div上打印无模糊内容,javascript,jquery,html,css,blur,Javascript,Jquery,Html,Css,Blur,我有一个网页,其中一个黑色矩形是背景,背景是壁纸。黑色矩形模糊了。我想在这个模糊的黑色矩形上打印非模糊内容,如表格和缩略图 在本例中,我将在模糊的黑色矩形上打印hello。但是问候也很模糊。如何不模糊H3标签?我有我正在使用的HTML和CSS 下面是代码 <div class="blackRectangle"> <div class="noBlur"> <h3>HELLO</h3> </div> </div
<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);
}
你好
.黑色矩形{
背景色:黑色;
不透明度:.7;
顶部:15px;
宽度:1870px;
高度:900px;
位置:绝对位置;
-webkit过滤器:模糊(5px);
-moz过滤器:模糊(5px);
-o-滤波器:模糊(5px);
过滤器:模糊(5px);
}
诺布勒先生{
顶部:30px;
宽度:1870px;
高度:900px;
位置:绝对位置;
-webkit转换:translateZ(0);
-webkit过滤器:模糊(0px);
-moz滤波器:模糊(0px);
-o-滤波器:模糊(0px);
过滤器:模糊(0px);
}
您可以在z索引-1处使用模糊矩形,在z索引1处使用非模糊矩形。因此,非模糊矩形将放置在模糊矩形上,因此其内容将清晰显示
HTML:
<div class="blurredRectangle">
</div>
<div class="nonBlurredRectangle">
<div class="noBlur">
<center> <h3>HELLO</h3></center>
</div>
</div>
.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中删除非模糊的内容吗?比如: