Zu CSS3 wurden drei neue Hintergrundattribute hinzugefügt: 1. „background-clip“, der den Bereich angibt, in dem das Hintergrundbild des Objekts nach außen abgeschnitten wird; 2. „background-origin“, der angibt, wo mit der Anzeige des Hintergrundbilds begonnen wird; 3. Hintergrundgröße, die die Größe des Hintergrundbilds angibt.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
css3 neues Hintergrundattribut
| Property | Description | CSS |
|---|---|---|
| background-clip | Gibt den Bereich an, in dem das Hintergrundbild des Objekts nach außen abgeschnitten wird. | 3 |
| Hintergrundursprung | Legen Sie den Referenzursprung (Position) des Hintergrundbilds des Objekts fest oder rufen Sie ihn ab, wenn Sie die Hintergrundposition berechnen. | 3 |
| background-size | Ruft die Größe des Hintergrundbilds des Objekts ab oder legt diese fest. | 3 |
1. Hintergrundgröße: Geben Sie 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 können Sie die Größe des Hintergrundbilds angeben, 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.
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}2. Hintergrundursprung: Geben Sie an, wo mit der Anzeige des Hintergrundbilds begonnen werden soll.
Das Hintergrundbild kann im Inhaltsfeld, im Füllfeld oder im Rahmenfeld platziert werden.
div{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}3. Hintergrundclip: Geben Sie an, wo mit dem Zuschneiden des Hintergrundbilds begonnen werden soll
Das obige ist der detaillierte Inhalt vonWas sind die neuen Hintergrundattribute in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
