テキストの背景を画像上でぼやけるように設定することはできますか？

イメージの背景にテキストの背景がぼやけるよう設定する方法はありますか？同様テキストの背景を画像上でぼやけるように設定することはできますか？

h1 { 
 
    text-align: center; 
 
    background-color: <blurry>; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <h1>The Last Will and Testament of Eric Jones</h1> 
 
    </body> 
 
</html>

EDITソリューションのほとんどはオンラインどのようにぼかし画像を表示します。私が探しているのは、テキスト要素の背景にぼかしフィルタを適用するものです。あなたがh1の要素の中にこれを設定できるかどうかわかりません。

出典

2016-12-03 Quang Thinh Ha

追加は、これはあなたが何を望むかですか？ http://codepen.io/chriscoyier/pen/yyOodm/ – ntahoang

は、この例では、私はより明白であることをぼかし効果の背景として画像を使用していますが、色で画像を変更したい場合は、単に背景と背景画像属性を置き換えます-color：＃000000;

＃000000は16進数の希望の色ですので、この値を上書きする必要があります。

<body> 
    <div class="background"> 
    </div> 
    <h1 class="text"> The Last Will and Testament of Eric Jones</h1> 
</body>

CSS：

.background { 
    position: absolute; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    display: block; 
    background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'); 
    width: 1200px; 
    height: 800px; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 
.text { 
position: relative; 
z-index: 3; 
}

Look at the example I made

出典

2016-12-03 15:33:21

初心者からのガード・ジョブ（y）:)ようこそSO – jafarbtech

ありがとうございました：D（y） –

ちょうど不透明

.element{ 
    opacity : 0.1; 
}

出典

2017-05-17 02:01:55

テキストの背景を画像上でぼやけるように設定することはできますか？

答えて

関連する問題