Comment supprimer les bords blancs flous en CSS3-tutoriel CSS-php.cn

Comment supprimer les bords blancs flous en CSS3

php中世界最好的语言

Libérer： 2018-03-22 16:02:20

original

5841 Les gens l'ont consulté

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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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!