如何模糊背景并仍能将不模糊的背景剪切到文本中？

Question

This是我能找到的最接近的地方。但不是文本是黑色的。我希望它将UNBLURRED背景剪切到它。

尝试1：

＆＃13;

＆＃13;

*{
  padding:0;
  margin:0;
}
/*Centering*/
html,body{
  height:100%;
  overflow:hidden;
}
.box{
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
/*Clip text*/
.item{
  font-size:250px;
  z-index:1;
}
.box{
 background:url('https://media.timeout.com/images/103444978/image.jpg');
  background-size:cover;
}
/*Blurring*/
.box::before{
  content:'';
  background:inherit;
  filter:blur(10px);
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  margin:-20px;
}

＆＃13;

<div class='box'>
  <div class='item'>NYC</div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题似乎是.item类上的z-index：1和-webkit-background-clip：text之间的冲突;属性。你不能把2放在一起，否则，屏幕将是空白的。 z-index：1用于将文本放在模糊的bacground前面。

This是我尝试将模糊和剪切效果放在一起的地方。我在.item类中注释掉了z-index：1，因此页面不会变为空白。

尝试2：

＆＃13;

＆＃13;

*{
  padding:0;
  margin:0;
}
/*Centering*/
html,body{
  height:100%;
  overflow:hidden;
}
.box{
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
/*Clip text*/
.item{
  font-size:250px;
  /*z-index:1;*/
}
.box{
 background:url('https://media.timeout.com/images/103444978/image.jpg');color:#21537a;/*text color for nonwebkit*/
  -webkit-text-fill-color: transparent;
  background-size:cover;
  -webkit-background-clip:text;
}
/*Blurring*/
.box::before{
  content:'';
  background:inherit;
  filter:blur(10px);
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  margin:-20px;
}

＆＃13;

<div class='box'>
  <div class='item'>NYC</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将相同的背景应用于.box和.box::before，并使用相同的参数。使用.box::before将z-index: -1移至后台。

注意：blur(10px)文字无法读取，因此我将其更改为filter: blur(15px)。

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

* {
  padding: 0;
  margin: 0;
}


/*Centering*/

html,
body {
  height: 100%;
  overflow: hidden;
}

.item {
  font-size: 250px;
}

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

.box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #21537a;
  background-size: cover;
  /*text color for nonwebkit*/
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.box::before {
  z-index: -1;
  content: '';
  filter: blur(15px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class='box'>
  <div class='item'>NYC</div>
</div>

Answer 2

只需使用height: 100%为两个元素添加背景，以便两者的背景大小相同，将.item更改为以其为中心的灵活父级内容，将background-clip和text-fill-color应用于.item并给它一个position，这样就会显示父元素的伪元素。

＆＃13;

＆＃13;

*{
  padding:0;
  margin:0;
}
/*Centering*/
html,body, .item, .box{
  height:100%;
  overflow:hidden;
}
.item{
  display:flex;
  justify-content:center;
  align-items:center;
}
/*Clip text*/

.box {
  background:url('https://media.timeout.com/images/103444978/image.jpg');
  color:#21537a;
  background-size:cover;
}
/*Blurring*/
.box::before{
  content:'';
  background:inherit;
  filter:blur(10px);
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  margin:-20px;
}
.item{
  font-size:250px;
  position: relative;
  background: inherit;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip:text;
}

＆＃13;

<div class='box'>
  <div class='item'>NYC</div>
</div>

＆＃13;

＆＃13;

＆＃13;