5

コンテナーの背景をぼかす方法はありますが、内部のテキストはぼかすことはできませんか?

スクリーンショット

  1. 最初にフルスクリーンの画像があります [すでに私が行っています ;-) 実際、私は純粋な css ソリューションを使用しています:

    background-size: cover;

  2. (1000px) 中央のコンテナー ( margin: 0 auto) の背景をぼかすよりも、コンテナー内のコンテンツをぼかすことはありません。

  3. 同じコンテナ ( margin: 0 auto; width: 1000px;) (もちろんぼかしなし) で、html を追加できます (...テキスト)。

誰かが私を助けてくれることを願っています。

4

1 に答える 1

3

実際の画像のサイズを小さくし、HTML コードで幅と高さを大きくしてください。

たとえば、実際の画像の幅と高さをそれぞれ 50px 程度にします。HTML コードで、幅と高さを 150px のように設定します。

これにより、画像が引き伸ばされ、ぼやけた効果が得られます。

まあ、それは論理的なアプローチでした。

CSS (CSS3) を使用する場合は、次のようにします。

filter: blur(5px) brightness(0.5);

値を好きなように設定するだけです..

参照: http://www.inserthtml.com/2012/06/css-filters/

それが役立つことを願っています...

編集1：

<div class="container">
    <div class="background"></div>
    <div class="text"></div>
</div>

クラスが「テキスト」のdivにすべてのテキストを入れ、クラス「背景」のdivを空のままにします..

次のスタイルも適用します。

.background  {
    background: #CCC;
    filter: blur(5px) brightness(0.5);
    position: absolute;
    top: 0; left: 0;
    height: 100%; width:100%;
}
.text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
于 2013-08-13T11:56:41.517 に答える