IT-Kurs CSS-Grundlagen 023_Bilder, Hintergrund

Bilder

Bilder sind ein sehr wichtiger Medientyp auf Webseiten. Der richtige Einsatz von Bildern kann Webseiten farbenfroh und lebendig gestalten und sie nicht auf kalten Text beschränken.

Bildlayout

Das img-Element ist standardmäßig ein Inline-Element und hat einen Standard-Abstand von 5px. Durch das Setzen als Block-Element kann eine Zeile nur ein Bild anzeigen. Durch das Setzen als Inline-Element können mehrere Bilder in einer Zeile angezeigt werden. Für die Positionierung von Block-Elementen wird die margin-Eigenschaft verwendet, für die Positionierung von Inline-Elementen die text-align-Eigenschaft.

Beispiel:

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

Effekt:

Bildtransparenz

In CSS kannst du die opacity-Eigenschaft verwenden, um die Transparenz von Elementen (einschließlich Bildern) festzulegen. Diese Eigenschaft akzeptiert einen Wert im Bereich von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig).

Wenn du nur den Hintergrund des Bildes transparent machen möchtest, ohne den Inhalt zu beeinflussen, kannst du RGBA-Farbwerte verwenden.

Beispiel:

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

Effekt:

Abgerundete Bildecken

In CSS kannst du die border-radius-Eigenschaft verwenden, um abgerundete Ecken für Bilder hinzuzufügen. Diese Eigenschaft wird verwendet, um den Krümmungsgrad der Rahmenecken eines Elements festzulegen.

Beispiel:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Radius der abgerundeten Ecke festlegen, kann nach Bedarf angepasst werden -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Horizontaler Radius 20px, vertikaler Radius 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- Oben links 10px, oben rechts 20px, unten rechts 15px, unten links 5px -->

Effekt:

Bildschatten

In CSS kannst du die box-shadow-Eigenschaft verwenden, um Schatteneffekte für Bilder hinzuzufügen. Diese Eigenschaft ermöglicht es dir, Schatteneffekte hinzuzufügen, einschließlich der Schattenfarbe, des Unschärferadius, des Versatzwertes usw.

Beispiel:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Horizontaler Versatz 5px, vertikaler Versatz 5px, Unschärferadius 10px, Schattenfarbe ist halbtransparentes Schwarz -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- Äußerer Schatten und innerer Schatten, verwende das inset-Schlüsselwort für den inneren Schatten -->

Effekt:

Hintergrund

In CSS ist der Hintergrund einer der häufig verwendeten Stile im Webdesign, um den Hintergrundstil von Elementen festzulegen.

Hintergrundfarbe

Die Hintergrundfarbe eines Elements wird über die background-color-Eigenschaft festgelegt.

Beispiel:

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Effekt:

Hintergrundbild

Das Hintergrundbild eines Elements wird über die background-image-Eigenschaft festgelegt. Es können relative Pfade, absolute Pfade oder URLs verwendet werden.

Beispiel:

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Effekt:

Hintergrundwiederholung (Kacheln)

Über die background-repeat-Eigenschaft wird die Wiederholungsart des Hintergrundbilds festgelegt, die horizontal, vertikal, in beiden Richtungen oder ohne Wiederholung sein kann.

• repeat: Bild wird horizontal und vertikal wiederholt (Standard)
• repeat-x: Bild wird horizontal wiederholt
• repeat-y: Bild wird vertikal wiederholt
• no-repeat: Bild wird nur einmal angezeigt

Beispiel:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    Keine Wiederholung
2
    <div class="base example1"></div>
3
    Horizontale Wiederholung
4
    <div class="base example2"></div>
5
    Vertikale Wiederholung
6
    <div class="base example3"></div>

Effekt:

Hintergrundgröße

Über die background-size-Eigenschaft wird die Größe des Hintergrundbilds festgelegt, die in konkreten Pixelwerten, Prozentsätzen oder mit Schlüsselwörtern wie cover oder contain angegeben werden kann.

• Standard: Vollständige Anzeige des originalen Hintergrundbilds.
• auto: Das Bild wird proportional skaliert als Hintergrund, das Bild wird wiederholt gekachelt angezeigt.
• cover: Das Bild wird so skaliert, dass es den gesamten Bereich abdeckt, wobei das Seitenverhältnis beibehalten wird. Das Bild wird möglicherweise nicht vollständig angezeigt, Teile können abgeschnitten werden.
• contain: Das Bild wird so weit wie möglich skaliert und behält das Seitenverhältnis bei, sodass die Höhe oder Breite vollständig in den Hintergrundbereich passt. Die Skalierung kann dazu führen, dass der Hintergrund teilweise leer bleibt, wobei der leere Bereich die durch background-color festgelegte Hintergrundfarbe anzeigt.

Beispiel:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

Effekt:

Hintergrundposition

Über die background-position-Eigenschaft wird die Anfangsposition des Hintergrundbilds festgelegt, wobei Pixelwerte, Prozentsätze oder Schlüsselwörter verwendet werden können.

• Es kann jede Längeneinheit verwendet werden, wenn die zweite Position (Y-Achsenrichtung) nicht angegeben wird, ist der Standardwert 50% (wenn beide Positionen nicht gesetzt sind, ist der Standardwert 0% 0%)
• Positionsschlüsselwörter (left/right/top/bottom/center), können einzeln oder paarweise verwendet werden (wenn das zweite Schlüsselwort nicht angegeben wird, ist der Standardwert center)
• Gemischte Verwendung

Beispiel:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Effekt:

Hintergrundbefestigung (Fixierung)

Über die background-attachment-Eigenschaft wird festgelegt, ob das Hintergrundbild fixiert ist oder mit dem Inhalt scrollt.

• scroll: Hintergrundbild bewegt sich mit dem Seitenscrollen (Standard)
• fixed: Hintergrundbild bewegt sich nicht mit dem Seitenscrollen
• local: Hintergrundbild scrollt mit dem Inhalt des Elements

Beispiel:

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

Effekt:

Hintergrund-Kurzschreibweise

Die background-Eigenschaft ermöglicht eine Kurzschreibweise, die wesentlich kompakter ist als die Deklaration einzelner Untereigenschaften und viel Code spart. Da background viele Untereigenschaften hat, ist die Reihenfolge der Kurzschreibweise ebenfalls eine Herausforderung. CSS2 empfiehlt folgende Reihenfolge für die Kurzschreibweise:

Beispiel:

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}