背景をぼかしても、ぼかしのない背景をテキストにクリップすることはできますか？

Question

Thisは私が得ることができる最も近いです。しかし、テキストが黒ではなく。私はそれにUNBLURRED背景をクリップしてもらいたい。

試み1：.itemクラスの1セット、および-webkit-背景クリップ：テキスト

*{ 
 
    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屈折率の間の衝突であると思われます;プロパティ。 2つを一緒に持つことはできません。そうでなければ、画面は空白になります。 z-index：1は、ぼかしされた背景の前にテキストを置くために使用されます。

This私は、ぼかしとクリッピングの効果を一緒に入れようとしています。私はZインデックスをコメントアウトしました：1の.itemクラスで、ページが空にならないようにします。

Attemp 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>