我如何模糊文本后面的背景
how do i blur background behind the text
任何人都可以帮我找出这里做错了什么吗?我试图将文本置于背景之上,但如果我使用 z-index: -1;
,它会消失或只是转到后面而无法看到它。并且不介意说是否有更好的方法来改革所有这些代码。
html, body {margin:0;padding:0}
.page-title {
position: absolute;
max-width: 38%;
top: 50px;
left: 0;
}
.hero-title {
background: rgba(0,0,0,.4);
padding: 15px 15px 15px 40px;
}
.hero-title::before {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.text-wraper {
z-index: 700;
color: #fff;
width: 100%;
}
.main-title {
font-size: 36px;
font-weight: 700;
letter-spacing: -1pt;
line-height: 1em;
text-transform: uppercase;
}
.sub-title {
font-size: 24px;
font-weight: 300;
line-height: 1em;
text-transform: uppercase;
}
<div class="hero-image">
<span class="deskTop1280">
<img src="http://via.placeholder.com/1280x500/246D5F" width="100%" alt="">
</span>
</div>
<div class="page-title">
<div class="hero-title">
<div class="text-wraper">
<div class="main-title">Main title goes here</div>
<div class="sub-title">sub title goes here</div>
</div>
</div>
</div>
如果我没听错,你是想像这样模糊背景图像吗?
编辑,这也是前面的文字,你在哪里使用 z-index 1 而不是 -1 :
https://jsfiddle.net/qrz19v00/1/
我刚刚在图像中添加了一个 class 模糊 属性:
.blur_image {
filter: blur(10px);
}
为了使z-index生效,它需要伴随这样的位置规则:
.text-wraper {
z-index: 700;
position: relative;
color: #FFFFFF;
width: 100%;
}
您实际上不需要 .text-wraper 上的 z-index。我在以下位置整理了一个示例:https://codepen.io/anon/pen/JMLveE?editors=1100.
任何人都可以帮我找出这里做错了什么吗?我试图将文本置于背景之上,但如果我使用 z-index: -1;
,它会消失或只是转到后面而无法看到它。并且不介意说是否有更好的方法来改革所有这些代码。
html, body {margin:0;padding:0}
.page-title {
position: absolute;
max-width: 38%;
top: 50px;
left: 0;
}
.hero-title {
background: rgba(0,0,0,.4);
padding: 15px 15px 15px 40px;
}
.hero-title::before {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.text-wraper {
z-index: 700;
color: #fff;
width: 100%;
}
.main-title {
font-size: 36px;
font-weight: 700;
letter-spacing: -1pt;
line-height: 1em;
text-transform: uppercase;
}
.sub-title {
font-size: 24px;
font-weight: 300;
line-height: 1em;
text-transform: uppercase;
}
<div class="hero-image">
<span class="deskTop1280">
<img src="http://via.placeholder.com/1280x500/246D5F" width="100%" alt="">
</span>
</div>
<div class="page-title">
<div class="hero-title">
<div class="text-wraper">
<div class="main-title">Main title goes here</div>
<div class="sub-title">sub title goes here</div>
</div>
</div>
</div>
如果我没听错,你是想像这样模糊背景图像吗?
编辑,这也是前面的文字,你在哪里使用 z-index 1 而不是 -1 : https://jsfiddle.net/qrz19v00/1/
我刚刚在图像中添加了一个 class 模糊 属性:
.blur_image {
filter: blur(10px);
}
为了使z-index生效,它需要伴随这样的位置规则:
.text-wraper {
z-index: 700;
position: relative;
color: #FFFFFF;
width: 100%;
}
您实际上不需要 .text-wraper 上的 z-index。我在以下位置整理了一个示例:https://codepen.io/anon/pen/JMLveE?editors=1100.