css définit l'image d'arrière-plan pour qu'elle soit floue et le contenu ne soit pas flou-connaissance CSS-php.cn

css définit l'image d'arrière-plan pour qu'elle soit floue et le contenu ne soit pas flou

卡哇伊

Libérer： 2020-07-15 17:25:52

original

11011 Les gens l'ont consulté

css définit l'image d'arrière-plan pour qu'elle soit floue et le contenu ne soit pas flou Exigence : A p a défini l'arrière-plan : url. Il est maintenant nécessaire de flouter l'arrière-plan de l'image et d'afficher clairement le texte à l'intérieur du p.

Code original :

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

Copier après la connexion

Effet original :
css définit limage darrière-plan pour quelle soit floue et le contenu ne soit pas flou

Solution : le contenu et l'image sont placés respectivement dans un p, et le flou d'arrière-plan p est défini via css , définissez la position absolue du contenu p.

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

Copier après la connexion

Effet :
css définit limage darrière-plan pour quelle soit floue et le contenu ne soit pas flou

Exigences : Un p a un background: url défini. Il est maintenant nécessaire de flouter l'arrière-plan de l'image et d'afficher clairement le texte dans le p.

Code original :

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

Copier après la connexion

Effet original :
css définit limage darrière-plan pour quelle soit floue et le contenu ne soit pas flou

Solution : le contenu et l'image sont placés respectivement dans un p, et le flou d'arrière-plan p est défini via css , définissez la position absolue du contenu p.

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

Copier après la connexion

Effet :
css définit limage darrière-plan pour quelle soit floue et le contenu ne soit pas flou

Merci d'avoir lu, j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://blog.csdn.net/oHeHeHou/article/details/51975539

Tutoriel recommandé : "Tutoriel CSS "

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!