CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。-CSSの知識-php.cn

CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。

卡哇伊

リリース： 2020-07-15 17:25:52

オリジナル

10676 人が閲覧しました

CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。要件: p には背景: url が設定されています。ここで、画像の背景をぼかし、p 内のテキストを明確に表示する必要があります。

元のコード:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }
    </style></head><body><p class="bg">
    <p class="content">我是内容</p></p></body></html>

ログイン後にコピー

元の効果:
CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。

解決策: コンテンツと画像をそれぞれ p に配置し、背景 p ブラーを設定しますcss を通じて、コンテンツ p の絶対位置を設定します。

html コード:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            height:600px;            text-align: center;            line-height: 600px;        }
        .bg-blur {            float: left;            width: 100%;            background-repeat: no-repeat;            background-position: center;            background-size: cover;            -webkit-filter: blur(15px);            -moz-filter: blur(15px);            -o-filter: blur(15px);            -ms-filter: blur(15px);            filter: blur(15px);        }
        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }

    </style></head><body>
    <p>
        <p class="bg bg-blur"></p>
        <p class="content content-front">我是内容</p>
    </p></p></body></html>

ログイン後にコピー

効果:
CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。

#要件: A p には、background: url が設定されています。ここで、画像の背景をぼかし、p 内のテキストを明確に表示する必要があります。

元のコード:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }
    </style></head><body><p class="bg">
    <p class="content">我是内容</p></p></body></html>

ログイン後にコピー

元の効果:
CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。

解決策: コンテンツと画像をそれぞれ p に配置し、背景 p ブラーを設定しますcss を通じて、コンテンツ p の絶対位置を設定します。

html コード:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            height:600px;            text-align: center;            line-height: 600px;        }
        .bg-blur {            float: left;            width: 100%;            background-repeat: no-repeat;            background-position: center;            background-size: cover;            -webkit-filter: blur(15px);            -moz-filter: blur(15px);            -o-filter: blur(15px);            -ms-filter: blur(15px);            filter: blur(15px);        }
        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }

    </style></head><body>
    <p>
        <p class="bg bg-blur"></p>
        <p class="content content-front">我是内容</p>
    </p></p></body></html>

ログイン後にコピー

効果:
CSS は背景画像をぼかし、コンテンツをぼかさないように設定します。

読んでいただきありがとうございます。多くのメリットがあることを願っています。

この記事は次から転載されています: https://blog.csdn.net/oHeHeHou/article/details/51975539

推奨チュートリアル: "css チュートリアル「

以上がCSS は背景画像をぼかし、コンテンツをぼかさないように設定します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。