如何模糊背景並仍然能夠將未模糊背景剪輯到文本中？

Question

This是我能找到的最接近的。但不是文字是黑色的。我希望它有無限的背景剪裁。

嘗試1：

*{ 
 
    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; 
 
}

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

這個問題似乎是Z-指數之間的衝突：-webkit-背景夾1套在.item類和：文本;屬性。您不能將2合在一起，否則，屏幕將變爲空白。 z-index：1用於將文本放在模糊的背景之前。

This是我試圖將模糊和裁剪效果放在一起的地方。我在.item類中註釋了z-index：1，所以頁面不會變爲空白。

學嘗試2：

*{ 
 
    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; 
 
}

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

Answer 1

應用相同的背景下，使用相同的參數來.box和.box::before。使用z-index: -1將.box::before移動到背景。

注意：該文本無法讀取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是柔性父母該中心的它的內容，應用背景剪輯和文本填充顏色到.item，並給它一個position，這樣它會出現父代的僞元素。

*{ 
 
    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; 
 
}

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