CSS-Hintergrundfarbe, Bildhintergrundbild

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:

Hintergrundbild des Objekts festlegen oder abrufen.

Wenn <'background-image '> eingestellt ist, wird empfohlen, <'background-color '> ist unsichtbar.

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“); Pfad zur CSS-Datei

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.

Mit Ausnahme der Sonderwerte „repeat-x“ und „repeat-y“, da „repeat-x“ „repeat no-repeat“ entspricht, „repeat-y“ einer „no-repeat-Wiederholung“, also „repeat-x“ und „repeat-“ y entsprechen der Bereitstellung von 2. Die entsprechende Skriptfunktion für jeden Parameterwert

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.

  Die entsprechende Skriptfunktion von
  • 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>