我想在文本后面添加模糊效果,并增加一些填充。我不需要后面的div并模糊div,我希望将其绑定到文本。
这是我的尝试:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.image {
z-index: -1;
object-fit: cover;
}
.text {
z-index: 2;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
}
.text::before {
content: "";
position: absolute;
z-index: 1;
top: -5px;
bottom: -5px;
left: -15px;
right: -15px;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<img class="image" src="https://source.unsplash.com/random" />
<h1 class="text">Example Text</h1>
</div>
我变得像这样:
我希望边缘不模糊。
我想要类似的东西:
您可以考虑使用overflow:hidden
停止模糊效果并具有锐利的边缘。我还考虑了填充,而不是调整顶部/左侧/右侧/底部:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.text {
z-index: 1;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
padding: 12px 22px; /*added this*/
overflow: hidden; /*added this*/
}
.text::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<h1 class="text">Example Text</h1>
</div>