CSS-Hintergrundfarbe, Bildhintergrundbild-HTML-Tutorial-php.cn

Hintergrundfarbe Hintergrundfarbe

Syntax:

Hintergrundfarbe:

Standardwert : transparent Transparent

Gilt für : Alle Elemente

Vererbung : Keine

Animation : Ja

Berechneter Wert: Angegebener Wert

Wert:

: Angegebene Farbe.

Beschreibung:

Hintergrundfarbe des Objekts festlegen oder abrufen.

Wenn sowohl eine Hintergrundfarbe als auch ein Hintergrundbild definiert sind, überlagert das Hintergrundbild die Hintergrundfarbe.
Wenn <'background-image '> eingestellt ist, wird empfohlen, <'background-color '> festzulegen, um einen gewissen Kontrast zur Textfarbe beizubehalten. Die entsprechende Skripteigenschaft von
ist backgroundColor.

Hintergrundbild

Syntax:

Hintergrundbild:

= | Gilt für : Alle Elemente

Vererbung: KeineAnimierbarkeit

: NeinBerechneter Wert

: Angegebener Wert Wert :

none: Kein Hintergrundbild. : Verwenden Sie absolute oder relative Adressen oder erstellen Sie Verlaufsfarben, um Bilder zu identifizieren.

Beschreibung:

Wenn mehrere Sätze von Hintergrundbildern definiert sind und es zu Überlappungen zwischen den Hintergrundbildern kommt, wird das Bild auf der Vorderseite mit dem Bild auf der Rückseite überlagert. Die entsprechende Skriptfunktion von

ist

backgroundImage

Hintergrundbild: url(“http://static.criteo.net/flash/icon/nai_small.png”); // Vollständiger URL-Pfad
Hintergrundbild: url(“/flash/icon/nai_small.png“); // Stammpfad

Hintergrundbild: url(../nai_small.png); //Keine Anführungszeichen schreiben

Hintergrundbild: url('../nai_small.png' ); // Einfache Anführungszeichen

Hintergrundwiederholung

Syntax:

Hintergrundwiederholung： [ , x |.wiederholen |.

Leerzeichen

]{1

,2

} >:

Wiederholung

Gilt für : alle Elemente Vererbung : keine Animation : Nein

Berechneter Wert : Angegebener Wert Wert: repeat-x: Das Hintergrundbild wird horizontal gekachelt

repeat-y : Das Hintergrundbild ist vertikal gekachelt Wiederholung: Das Hintergrundbild ist sowohl horizontal als auch vertikal gekachelt keine Wiederholung: Das Hintergrundbild ist nicht gekachelt

Rund: Das Hintergrundbild wird automatisch skaliert, bis es passt und ausfüllt den gesamten Container. (CSS3) Raum: Das Hintergrundbild wird im gleichen Abstand gekachelt und füllt den gesamten Container oder eine bestimmte Richtung aus. (CSS3)

Beschreibung:

Legen Sie fest oder rufen Sie ab, wie das Hintergrundbild des Objekts angeordnet und gefüllt wird. Zuerst muss das Attribut <'background-image'> angegeben werden.

Ermöglicht die Bereitstellung von 2 Parametern. Wenn alle 2 Parameter bereitgestellt werden, wird der erste für die Querformatausrichtung und der zweite für die Hochformatausrichtung verwendet.

Wenn nur 1 Parameter angegeben wird, wird dieser für Quer- und Hochformat verwendet.


ist
backgroundRepeat
.

Der Hintergrund scrollt mit dem Inhalts-Hintergrundanhang

Syntax:

Hintergrundanhang: [ , ]*

= behoben |. lokal

Standardwert: scrollen

gilt für : Alle Elemente

Vererbung: Keine

Animation: Nein

Berechneter Wert: Angegebener Wert

Werte übernehmen:

fixiert: Das Hintergrundbild ist relativ zum Formular fixiert.
scrollen: Das Hintergrundbild ist relativ zum -Element fixiert, was bedeutet, dass das Hintergrundbild nicht gescrollt wird, wenn der Elementinhalt gescrollt wird, da das Hintergrundbild immer dem Element selbst folgt. Es wird jedoch mit dem Vorgängerelement oder der Vorgängerform des Elements gescrollt.
lokal: Das Hintergrundbild ist relativ zum Elementinhalt festgelegt, was bedeutet, dass beim Scrollen des Elements mit dem Element auch das Hintergrundbild scrollt, da das Hintergrundbild immer dem Inhalt folgt. (CSS3)

Beschreibung:

Festlegen oder Abrufen, ob das Hintergrundbild mit dem Objektinhalt scrollt oder fixiert ist. Zuerst muss das Attribut <'background-image'> angegeben werden.

ist backgroundAttachment.

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="utf-8"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>background-attachment 背景跟着内容动<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span>
<span style="color: #800000; background-color: #f5f5f5">
    .parent</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2000px</span><span style="color: #000000; background-color: #f5f5f5">;</span>
    <span style="color: #000000; background-color: #f5f5f5">}</span><span style="color: #800000; background-color: #f5f5f5">

    .sample</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
    
        overflow</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> scroll</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        font-size</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 22px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 230px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        border</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2px solid black</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        background-image</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> url(red.png)</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        <strong><font style="background-color: #ffff00">background-attachment</font></strong></span><strong><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> <font style="background-color: #ffff00">local</font></span></font><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">;</span></font></strong>
    <span style="color: #000000; background-color: #f5f5f5">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="parent"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sample"</span><span style="color: #0000ff">></span><span style="color: #000000">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

Nach dem Login kopieren