So führen Sie Bilddateien in CSS ein-Front-End-Fragen und Antworten-php.cn

So führen Sie Bilddateien in CSS ein

藏色散人

Freigeben： 2023-01-04 09:38:19

Original

11521 Leute haben es durchsucht

So importieren Sie Bilddateien in CSS: 1. Importieren Sie mit der Methode „background-image:url (Bildadresse)“. 2. Verwenden Sie die Methode „background:url (Bildadresse)“, um das Bild zu importieren und anzuzeigen die Webseite.

So führen Sie Bilddateien in CSS ein

Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.

Empfohlen: „CSS-Video-Tutorial“

Fügen Sie Bilddateien in CSS ein

In CSS können Sie zum Importieren von Bildern „background-image:url“ (Ihre Bildadresse) oder „background:url“ (Ihre Bildadresse) verwenden werden auf der Webseite angezeigt.

<div id="bgimg"></div>
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}

Nach dem Login kopieren

Der erste Parameter ist die Hintergrundfarbe der unteren Bildebene. Der dritte Parameter ist die relative Position der Ober- und Unterseite des Bildes Der vierte Parameter ist die relative Position der linken und rechten Seite des Bildes (oben, unten), der fünfte Parameter ist die Wiederholung des Bildes (andere Parameter wiederholen, wiederholen-x, wiederholen-y).

Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(1.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

Nach dem Login kopieren

Rendering:

So führen Sie Bilddateien in CSS ein

Beschreibung:

Das Hintergrundattribut ist ein Kurzattribut, das alle Hintergrundattribute in einer Anweisung festlegen kann.

Das Hintergrundattribut ist eine Eigenschaft, die speziell den Hintergrund festlegt. Sie können die Hintergrundfarbe oder das Hintergrundbild festlegen.

Werfen wir einen Blick auf die Attribute, die für den Hintergrund festgelegt werden können:

background-color: Gibt die zu verwendende Hintergrundfarbe an.

Hintergrundposition: Gibt die Position des Hintergrundbilds an.

Hintergrundgröße: Gibt die Größe des Hintergrundbilds an.

background-repeat: Gibt an, wie das Hintergrundbild wiederholt werden soll.

background-origin: Gibt den Positionierungsbereich des Hintergrundbilds an.

background-clip: Gibt den Zeichenbereich des Hintergrunds an.

background-attachment: Gibt an, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.

Hintergrundbild: Gibt das zu verwendende Hintergrundbild an.

Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Polsterung und Rändern (jedoch nicht der Ränder). Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich sowohl vertikal als auch horizontal.

Das obige ist der detaillierte Inhalt vonSo führen Sie Bilddateien in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!