Css 我怎样才能模糊背景，并且仍然能够将未模糊的背景剪辑到文本中？

是我能到达的最近的地方。但是文本不是黑色的。我希望它有一个清晰的背景剪辑到它

尝试1：

*{
填充：0；
保证金：0；
}
/*定心*/
html，正文{
身高：100%；
溢出：隐藏；
}
.盒子{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*剪辑文本*/
.项目{
字体大小：250px；
z指数：1；
}
.盒子{
背景：url（'https://media.timeout.com/images/103444978/image.jpg');
背景尺寸：封面；
}
/*模糊*/
.box：：之前{
内容：''；
背景：继承；
过滤器：模糊（10px）；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
利润率：-20px；
}

纽约市

将相同的背景和相同的参数应用于

.box

和

.box:：before

。使用

z-index:-1

将

.box:：before

移动到后台

注意：文本无法用

blur（10px）

读取，因此我将其更改为

filter:blur（15px）

*{
填充：0；
保证金：0；
}
/*定心*/
html，
身体{
身高：100%；
溢出：隐藏；
}
.项目{
字体大小：250px；
}
.盒子，
.box：：之前{
背景：url（'https://media.timeout.com/images/103444978/image.jpg');
背景尺寸：封面；
背景位置：0；
}
.盒子{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
颜色：#21537a；
背景尺寸：封面；
/*非WebKit的文本颜色*/
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
}
.box：：之前{
z指数：-1；
内容：''；
滤镜：模糊（15px）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}

纽约市

将相同的背景和相同的参数应用于

.box

和

.box:：before

。使用

z-index:-1

将

.box:：before

移动到后台

注意：文本无法用

blur（10px）

读取，因此我将其更改为

filter:blur（15px）

*{
填充：0；
保证金：0；
}
/*定心*/
html，
身体{
身高：100%；
溢出：隐藏；
}
.项目{
字体大小：250px；
}
.盒子，
.box：：之前{
背景：url（'https://media.timeout.com/images/103444978/image.jpg');
背景尺寸：封面；
背景位置：0；
}
.盒子{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
颜色：#21537a；
背景尺寸：封面；
/*非WebKit的文本颜色*/
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
}
.box：：之前{
z指数：-1；
内容：''；
滤镜：模糊（15px）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}

纽约市

只需为两个元素提供高度为100%的背景，以便两个元素的背景大小相同，将

.item

更改为中心内容的柔性父元素，将背景剪辑和文本填充颜色应用于

.item

，并给它一个

位置

，使其显示为父元素的伪元素

*{
填充：0；
保证金：0；
}
/*定心*/
html、正文、.item、.box{
身高：100%；
溢出：隐藏；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*剪辑文本*/
.盒子{
背景：url（'https://media.timeout.com/images/103444978/image.jpg');
颜色：#21537a；
背景尺寸：封面；
}
/*模糊*/
.box：：之前{
内容：''；
背景：继承；
过滤器：模糊（10px）；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
利润率：-20px；
}
.项目{
字体大小：250px；
位置：相对位置；
背景：继承；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
}

纽约市

只需为两个元素提供高度为100%的背景，以便两个元素的背景大小相同，将

.item

更改为中心内容的柔性父元素，将背景剪辑和文本填充颜色应用于

.item

，并给它一个

位置

，使其显示为父元素的伪元素

*{
填充：0；
保证金：0；
}
/*定心*/
html、正文、.item、.box{
身高：100%；
溢出：隐藏；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*剪辑文本*/
.盒子{
背景：url（'https://media.timeout.com/images/103444978/image.jpg');
颜色：#21537a；
背景尺寸：封面；
}
/*模糊*/
.box：：之前{
内容：''；
背景：继承；
过滤器：模糊（10px）；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
利润率：-20px；
}
.项目{
字体大小：250px；
位置：相对位置；
背景：继承；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
}

纽约市

这就是你想要的吗？天哪，是的。你应该让它成为一个回答太棒了！提交了一个答案：）这就是你想要的吗？天哪，是的。你应该让它成为一个回答太棒了！提交了一个答案：）为什么要在.box上添加相对位置？你能解释一下逻辑吗？为什么要将z-index:-1放在：：before而不是z-index:1放在文本上以使其弹出？设置位置

.box

使其成为

.box：：before

的堆叠上下文（因为

.box

覆盖了屏幕，在这种情况下并不重要）。在伪元素上设置

z-index:-1

会将其移动到

.box

元素下（它成为背景）。为什么要在.box上添加相对位置？您能解释一下逻辑吗？为什么要将z-index:-1放在：：before而不是z-index:1放在文本上以使其弹出？设置位置

.box

使其成为

.box：：before

的堆叠上下文（因为

.box

覆盖了屏幕，在这种情况下并不重要）。在伪元素上设置

z-index:-1

.box,
.box::before {
  background: url('https://media.timeout.com/images/103444978/image.jpg');
  background-size: cover;
  background-position: 0;
}