Maison > Article > interface Web > Comment supprimer les bords blancs flous en CSS3

Comment supprimer les bords blancs flous en CSS3

php中世界最好的语言original: 2018-03-22 16:02:205890parcourir

Cette fois, je vais vous montrer comment supprimer les bords blancs flous de CSS3, et quelles sont les précautions pour supprimer les bords blancs flous de CSS3. Ce qui suit est un cas pratique, jetons un coup d'œil.

Créer une page de connexion avec une image de fond plein écran avec un effet verre dépoli La méthode de mise en œuvre est la suivante :

HTML :

<body>
　　<p class="login-wrap">
　　　　<p class="login-mask"></p>
　　　　<p class="login-box"></p>
　　</p>
　　<script>
　　　　var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
　　　　var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
　　　　$('.login-mask').css("height", h);
　　　　$('.login-mask').css("width", w);
　　</script>
</body>

CSS : <.>

.login-wrap {
　　overflow: hidden;
}
.login-mask {
　　/* IE6~IE9 */
　　filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false);
　　-webkit-filter: blur(100px);
　　-moz-filter: blur(100px);
　　-ms-filter: blur(100px);
　　filter: blur(100px);
　　background-image: url(../../../img/background/home-bg-3.jpg);
　　background-repeat: no-repeat;
　　background-size: cover;
　　background-attachment: fixed;
　　background-position: center;
　　position: absolute;
　　z-index: 1;
}
.login-box {
　　width: 300px;
　　height: 400px;
　　background-color: rgba(255, 255, 255, 0.5);
　　display: block;
　　border: 1px solid rgba(183, 183, 183, 0.47);
　　border-radius: 6px;
　　position: absolute;
　　left: 50%;
　　margin-right: auto;
　　margin-left: -150px;
　　margin-top: 10%;
　　z-index: 2;
}

effet Comme suit :

Vous pouvez constater qu'il y a des bords blancs sur les bords. Il s'agit d'un cas où la valeur de flou est très grande. . La solution pour le moment est de changer directement background-size:cover; en background-size:150% 150%;. Le rendu est le suivant :

Si vous regardez bien, vous constaterez que les bords blancs ne sont pas si évidents.

L'autre est lorsque la valeur de flou est relativement petite, par exemple, en changeant la valeur de flou ci-dessus à 20, l'effet est le suivant :

Vous peut voir Les bords blancs sont évidents. Si vous ajoutez la même image d'arrière-plan au corps à ce moment, les bords blancs disparaîtront :

body{
　　background-image: url(../../../img/background/home-bg-3.jpg);
　　background-repeat: no-repeat;
　　background-size: cover;
　　background-attachment: fixed;
　　background-position: center;
}

L'image d'effet est la suivante :

Vous pouvez voir la différence sur les bords est évidente. Mais le contraste est un peu évident, et l'effet n'est pas bon. Changez la valeur de flou un peu plus petite, à 5, et l'image de l'effet est la suivante :

Le le bord blanc sur le bord est supprimé et cela n’a plus l’air si incohérent.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer la disparition des lignes de bordure CSS

Réaliser plusieurs arrière-plans pour simuler des bordures dynamiques

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：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment gérer la disparition des lignes de bordure en CSSArticle suivant：Comment gérer la disparition des lignes de bordure en CSS

Articles Liés

Voir plus