Heim  >  Artikel  >  Web-Frontend  >  CSS3-Tutorial-Hintergrund

CSS3-Tutorial-Hintergrund

黄舟
黄舟Original
2016-12-27 15:56:521321Durchsuche

Front-End-Entwicklungsprogrammierer, ich freue mich, Ihnen jeden Tag etwas Wissen über CSS3-Tutorials zu erklären. CSS3 enthält mehrere neue Hintergrundattribute, die eine stärkere Kontrolle über den Hintergrund ermöglichen.

In diesem Artikel erfahren Sie die folgenden zwei Hintergrundattribute:

1.

Sie erfahren außerdem, wie Sie mehrere Hintergrundbilder verwenden.

Browser-Unterstützung

CSS3-Tutorial-HintergrundLassen Sie uns zunächst die CSS3-Hintergrundgrößeneigenschaft verstehen:

CSS3-Tutorial-Hintergrundbackground The Das Attribut -size gibt die Größe des Hintergrundbilds an.

Vor CSS3 wurde die Größe des Hintergrundbilds durch die tatsächliche Größe des Bildes bestimmt. In CSS3 kann die Größe des Hintergrundbilds angegeben werden, wodurch wir das Hintergrundbild in verschiedenen Umgebungen wiederverwenden können.

Sie können Abmessungen in Pixeln oder Prozentsätzen angeben. Wenn die Abmessungen als Prozentsatz angegeben werden, beziehen sich die Abmessungen auf die Breite und Höhe des übergeordneten Elements.

Beispiel 1:

Passen Sie die Größe des Hintergrundbilds an:

Beispiel 2:
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

Strecken Sie das Hintergrundbild, um den Inhaltsbereich auszufüllen :

Sehen wir uns das CSS3-Attribut „background-origin“ an:
div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

Das Attribut „background-origin“ gibt den Positionierungsbereich des Hintergrundbilds an.

Hintergrundbilder können im Content-Box-, Padding-Box- oder Border-Box-Bereich platziert werden.

CSS3-Tutorial-HintergrundBeispiel:

Hintergrundbild im Inhaltsfeld positionieren:

CSS3 mehrere Hintergrundbilder:
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3-Tutorial-HintergrundCSS3 ermöglicht Ihnen die Verwendung mehrerer Hintergrundbilder für Elemente.

Beispiel:

Legen Sie zwei Hintergrundbilder für das Körperelement fest:

Neues Hintergrundattribut:
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}


CSS3-Tutorial-Hintergrund Das Obige ist der Inhalt des CSS3-Tutorials – Hintergrund. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:CSS3-Tutorial-SchriftartenNächster Artikel:CSS3-Tutorial-Schriftarten