简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment implémenter un flou d'arrière-plan simple en utilisant CSS (exemple de code)

Comment implémenter un flou d'arrière-plan simple en utilisant CSS (exemple de code)

青灯夜游
青灯夜游avant
2018-10-25 16:16:112581parcourir

Le contenu de cet article est de présenter la méthode de réalisation d'un flou d'arrière-plan simple à l'aide de CSS (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Utilisez l'attribut de filtre pour définir la valeur de flou

Effet :

style CSS : 

<style type="text/css">
        .cover {
            width: 600px;
            height: 300px;
            position: relative;
            text-align: center;
            line-height: 300px;
            color: #fff;
            margin: 20px auto;
        }
        
        .cover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 300px;
            background: transparent url(Images/picture/5.jpg) center center no-repeat;
            filter: blur(8px);
            z-index: -1;
            background-size: cover;
        }
    </style>

Structure HTML : 

<body>
    <p class="cover">
        <h2>背景模糊，文字清晰显示</h2>
    </p>
</body>

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：La beauté de l'utilisation combinée de display:table et display:table-cell en CSSArticle suivant：La beauté de l'utilisation combinée de display:table et display:table-cell en CSS

Articles Liés

Voir plus