Was sind die CSS-Hintergrundeigenschaften? Zusammenfassung der CSS-Hintergrundeigenschaften (mit Code)

Das CSS-Hintergrundattribut wird verwendet, um den Hintergrund von HTML-Elementen zu definieren. Was sind also die CSS-Hintergrundattribute? Beispielsweise gehören CSS-Hintergrundfarbattribute und CSS-Bildhintergrundattribute alle zu CSS-Hintergrundattributen. In diesem Artikel werden die relevanten Attribute in CSS-Hintergrundattributen zusammengefasst.

Werfen wir zunächst einen Blick auf die CSS-bezogenen Eigenschaften:

• background-color: css legt die fest Hintergrundfarbe

• Hintergrundbild: CSS zum Festlegen des Bildhintergrunds

• Hintergrundwiederholung: CSS zum Festlegen, ob das Hintergrundbild wiederholt wird und wie man es wiederholt

• background-position: CSS legt die Position des Hintergrundbilds fest

• background-attachment: ob das Hintergrundbild fixiert ist oder scrollt mit dem Rest der Seite

• Hintergrund: ein Kurzattribut, das das Hintergrundattribut in einer Anweisung festlegt

Bereich von Elementhintergrund:

Der Hintergrund füllt den Inhalt, die Polsterung und die Randbereiche des Elements aus und reicht bis zu den Außenkanten des Elementrands (jedoch nicht zu den Rändern). Wenn der Rahmen transparente Teile hat (z. B. einen gepunkteten Rand), wird die Hintergrundfarbe durch diese transparenten Teile hindurchscheinen.

Browserunterstützung:

Das Hintergrundattribut wird von allen gängigen Browsern unterstützt.

Hinweis: IE7 und früher unterstützen keine „geerbten“ Werte (inherit). Für IE8 muss !DOCTYPE definiert werden. IE9 unterstützt „Vererbung“.

CSS-Hintergrundfarbe: Das Attribut

background-color wird verwendet, um die Hintergrundfarbe des Elements zu definieren.

body {background-color: #b0c4de;}

In CSS werden Farbwerte normalerweise wie folgt definiert:

• Hex – Zum Beispiel: #ff0000

• RGB – zum Beispiel: rgb(255,0,0)

• Farbname – zum Beispiel: Rot

• Standard – transparent , was transparent bedeutet. Wenn für ein Element keine Hintergrundfarbe angegeben ist, ist der Hintergrund transparent.

• inherit erbt die Hintergrundfarbe vom übergeordneten Element. Dies führt zu Kompatibilitätsproblemen im IE.

CSS-Bildhintergrund:

Das Attribut „Hintergrundbild“ wird verwendet, um das Hintergrundbild des Elements zu definieren.

Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich horizontal und vertikal.

body {background-image: url('paper.gif');}

Tipp: Hintergrundfarbe und Hintergrundbild können nebeneinander existieren. Bitte stellen Sie eine verfügbare Hintergrundfarbe ein, damit die Seite auch dann einen guten visuellen Effekt erzielen kann, wenn das Hintergrundbild nicht verfügbar ist.

body {background-image: url('paper.gif');background-color:#fff;}

Attributwert:

• none – standardmäßig kein Hintergrundbild

• url('image path') – Bild zugänglich Pfad, Sie können Netzwerkadresse, relative Pfadadresse, absolute Pfadadresse verwenden

• erben – vom übergeordneten Element erben

CSS-Hintergrund wiederholen:

Wenn Sie den Hintergrund kacheln müssen, können Sie das Attribut „background-repeat“ verwenden.

body {
    background-image: url('gradient2.png');
    background-repeat: repeat-x;
}

Attributwert:

• repeat bewirkt, dass das Bild standardmäßig horizontal und vertikal gekachelt wird.

• Wiederholen-x und Wiederholen-y bewirken, dass das Hintergrundbild nur in horizontaler bzw. vertikaler Richtung wiederholt wird.

• No-Repeat erlaubt nicht, dass das Bild in irgendeiner Richtung gekachelt wird.

• inherit erbt vom übergeordneten Element.

CSS-Hintergrundpositionierung:

Das Attribut „Hintergrundposition“ wird verwendet, um die Position des Hintergrundbilds zu steuern, normalerweise in Verbindung mit Hintergrund- wiederholen: keine Wiederholung;

body {
    background-image: url('img_tree.png');
    background-repeat: no-repeat;
    background-position: right top;
}

Es gibt viele Möglichkeiten, einen Wert für die Eigenschaft „Hintergrundposition“ bereitzustellen. Zunächst gibt es einige Schlüsselwörter, die Sie verwenden können: oben, unten, links, rechts und Mitte. Normalerweise erscheinen diese Schlüsselwörter paarweise, aber das ist nicht immer der Fall. Sie können auch einen Längenwert wie 100 Pixel und schließlich einen Prozentwert verwenden.

Schlüsselwörter:

Bildplatzierungsschlüsselwörter sind am einfachsten zu verstehen und bewirken, was ihr Name vermuten lässt. Mit „oben rechts“ wird beispielsweise das Bild in der oberen rechten Ecke des Füllbereichs des Elements platziert.

Laut Spezifikation können Positionsschlüsselwörter in beliebiger Reihenfolge erscheinen, solange es nicht mehr als zwei Schlüsselwörter gibt, von denen eines der horizontalen Richtung und das andere der vertikalen Richtung oben rechts und rechts oben entspricht sind gleichwertig.

Wenn nur ein Schlüsselwort vorkommt, wird das andere Schlüsselwort als zentral betrachtet.

Prozentsatz:

Prozentwerte werden komplexer ausgedrückt. Nehmen wir an, Sie möchten ein Bild innerhalb seines Elements mithilfe eines Prozentwerts zentrieren:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Wenn das Bild 0 % 0 % hat, wird seine obere linke Ecke in der oberen linken Ecke des Füllbereichs des Elements platziert . Wenn die Bildposition 100 % beträgt, wird bei 100 % die untere rechte Ecke des Bildes an der unteren rechten Ecke des rechten Rands platziert.

Positionieren Sie ein Bild zu 2/3 horizontal und zu 1/3 vertikal:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

Wenn nur ein Prozentwert angegeben wird, wird der angegebene Wert als horizontaler Wert verwendet, der vertikale Wert als Wert mit 50 % angenommen werden.

Längenwert:

Der Längenwert erklärt den Versatz der oberen linken Ecke des Auffüllbereichs des Elements. Der Versatzpunkt ist die obere linke Ecke des Bildes.

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

css背景固定：

background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。

body {
    background-image:url('image.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

属性值：

• scroll 默认。背景图像会随着页面其余部分的滚动而移动。

• fixed 当页面的其余部分滚动时，背景图像不会移动。

• inherit 从父元素继承。

简写属性：

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

相关文章推荐：

你不知道的CSS背景—css背景属性全解

详解css之背景background属性

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Hintergrundeigenschaften? Zusammenfassung der CSS-Hintergrundeigenschaften (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!