Heim > Artikel > Backend-Entwicklung > So strecken Sie ein CSS-Hintergrundbild auf 100 % und stellen die Vollbildanzeige ein
So strecken Sie ein CSS-Hintergrundbild auf 100 % und stellen die Vollbildanzeige ein
- 不言Original
- 2018-03-30 11:06:2811883Durchsuche
Heutzutage ist die Verwendung von CSS auch für viele Benutzer sehr wichtig. Es kann Bilder sehr gut strecken, ohne Spuren zu hinterlassen. In diesem Artikel erfahren Sie, wie Sie CSS-Hintergrundbilder auf 100 % im Vollbildmodus einrichten Anzeige, Freunde in Not können darauf verweisen.
Auch der Einsatz von CSS ist heutzutage für viele Nutzer sehr wichtig. Es kann Bilder sehr gut strecken, ohne Spuren zu hinterlassen. Was sollen wir also tun, wenn wir CSS verwenden, wenn das Hintergrundbild auf 100 % gestreckt und im Vollbildmodus angezeigt wird? Was ist der spezifische Code?
Wie verwende ich ein CSS-Hintergrundbild, um es auf 100 % Vollbildanzeige zu strecken? Diese Frage mag einfach klingen. Aber es tut mir leid, Ihnen das sagen zu müssen. Es ist nicht so einfach, wie wir denken.
Legen Sie beispielsweise einen Hintergrund in einem Container fest (Body, P, Span). Die Länge und Breite dieses Hintergrunds können vor CSS2.1 nicht geändert werden.
Daher kann das tatsächliche Ergebnis nur wiederholt angezeigt werden, sodass die Attribute wiederholen, wiederholen-x, wiederholen-y und keine Wiederholung erscheinen. Es dient zur Steuerung der Anzeige von Hintergrundbildern. Daher gibt es im Allgemeinen zwei Arten von Hintergrundbildern:
1. Es ist ein großes Bild und die Größe entspricht genau der Größe des Bereichs
2. Ein sehr kleines Balkendiagramm bildet nach der Wiederholung einen sehr regelmäßigen großen Bildhintergrund.
Aber nach dem Aufkommen von CSS3 hat sich diese Situation verbessert. Die Eigenschaft „Hintergrundgröße“ kann unsere bisherigen Wünsche wahr werden lassen.
Und diese Eigenschaft kann auf Firefox, Chrome und IE9 verwendet werden.
Die spezifische Verwendung ist wie folgt:
Hintergrundbildgröße (numerische Darstellung):
Der Code lautet wie folgt:
#Hintergrundgröße{
Hintergrundgröße:200px 100px;
}
Hintergrundbildgröße (in Prozent):
Der Code lautet wie folgt:
#background-size2{
background-size:30% 60%;
}
Hintergrundbildgröße (erweitern Sie das Bild proportional, um das Element auszufüllen, d. h. den Deckwert):
Der Code lautet wie folgt:
#background-size3{
Hintergrundgröße:cover;
}
Hintergrundbildgröße (das Bild wird proportional verkleinert, um es an die Größe des Elements anzupassen, d. h. an den enthaltenen Wert):
Der Code lautet wie folgt:
#Hintergrundgröße
e4{
Hintergrundgröße:enthalten;
}
Hintergrundbildgröße (Füllen Sie das Element mit der eigenen Größe des Bildes, d. h. dem automatischen Wert):
Der Code lautet wie folgt:
#background-size5{
Hintergrundgröße:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<style>
#bgvid1{
width:100%;
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
height: auto;
z-index: -100;
background-size: cover;
}
</style>
<body>
<img id="bgvid1" src="/uploads/common/veryhuo.gif">
</body>
</html>
<p style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></p>Verwandte Empfehlungen:
Welche Größe sollte für wiederholte Kachel-CSS-Hintergrundbilder geeignet sein? _html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonSo strecken Sie ein CSS-Hintergrundbild auf 100 % und stellen die Vollbildanzeige ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)