Heim > Artikel > Web-Frontend > So entfernen Sie unscharfe weiße Kanten in CSS3
So entfernen Sie unscharfe weiße Kanten in CSS3
- php中世界最好的语言Original
- 2018-03-22 16:02:205836Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie die unscharfen weißen Kanten von CSS3 entfernen und welche Vorsichtsmaßnahmen zum Entfernen der unscharfen weißen Kanten von CSS3 gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Erstellen Sie eine Anmeldeseite mit einem Vollbild-Hintergrundbild mit Milchglaseffekt. Die Implementierungsmethode ist wie folgt:
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;
}
Effekt Wie folgt:
Sie können feststellen, dass an den Rändern weiße Ränder vorhanden sind. Dies ist ein Fall, in dem der Unschärfewert sehr groß ist . Die Lösung besteht zu diesem Zeitpunkt darin, „background-size:cover;“ direkt in „background-size:150% 150%;“ zu ändern. Die Darstellung ist wie folgt:
Wenn Sie genau hinschauen, können Sie erkennen, dass die weißen Ränder nicht so offensichtlich sind.
Das andere ist, wenn der Unschärfewert relativ klein ist. Wenn Sie beispielsweise den obigen Unschärfewert auf 20 ändern, ist der Effekt wie folgt:
Sie kann sehen Der weiße Rand ist offensichtlich. Wenn Sie zu diesem Zeitpunkt das gleiche Hintergrundbild zum Körper hinzufügen, verschwindet der weiße Rand:
body{
background-image: url(../../../img/background/home-bg-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
Das Effektbild sieht wie folgt aus:
Sie können sehen, dass der Unterschied an den Rändern offensichtlich ist. Aber der Kontrast ist etwas offensichtlich und der Effekt ist nicht gut. Ändern Sie den Unschärfewert etwas kleiner, auf 5, und das Effektbild ist wie folgt:
Das Weiße Ränder an den Rändern werden entfernt und es sieht nicht mehr so uneinheitlich aus.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Wie man mit dem Verschwinden von CSS-Grenzlinien umgeht
Mehrere Hintergründe realisieren, um dynamische Grenzen zu simulieren
Das obige ist der detaillierte Inhalt vonSo entfernen Sie unscharfe weiße Kanten in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!