を使用してブラーソリッドカラーの背景を作成します。私はCSSを使用したソリッドカラーの背景に光沢のあるブラー効果を適用するために取得支援が必要なCSS
<div class="container">
<div class="overlay">
Hello World!
</div>
</div>
.container {
background: blue;
width: 100%;
height: 300px;
}
.overlay {
color: #FFF;
padding: 20px;
}
JSFiddle：https://jsfiddle.net/znp73yr6/
下記の使用コードスニペット、使用していることぼかし効果のためfilter: blur(5px);
.container {
position: relative;
width: 100%;
height: 300px;
}
.blur {
background: blue url(http://i.stack.imgur.com/fAcHL.jpg);
position: absolute;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index: 1;
}
.overlay {
color: #FFF;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}<div class="container">
<div class="blur"></div>
<div class="overlay">
Hello World!
</div>
</div>あなたはすべてのオーバーレイコンテンツが私は前面に見えるようにする必要がbluredされていることがわかります;） –
@ IhabAbdel - Rahimはあなたを持って、私はスニペットを変更したので、 – gevorg
IEをサポートする必要がない場合は大丈夫です：http：//caniuse.com/#feat=css-filters –
rgbaは、不透明度を与えるために色を指定できます。これにより、背景がぼやけて見えます。
background: rgba(0,0,255, 0.5);
あなたはこれをチェックしていますhttp://codersblock.com/blog/creating-glow-effects-with-css/ –
ますが、これはどのように見えるかの例を与えることができますか？私はここで推測することが残っている –
私は 'filter：blur（5px）;'を使うことができると思います。 – gevorg