Wie kann man mit CSS ein Bild austauschen?

Um mit CSS ein Bild auszutauschen, kannst du die `background-image`-Eigenschaft verwenden oder das `<img>`-Tag durch ein anderes Bild ersetzen. Hier sind zwei Methoden:

1. **Hintergrundbild ändern**:
Du kannst ein Bild als Hintergrund eines Elements festlegen und es bei Bedarf ändern. Zum Beispiel:

```css
.image-container {
width: 300px;
height: 200px;
background-image: url('bild1.jpg');
background-size: cover;
}

.image-container:hover {
background-image: url('bild2.jpg');
}
```

In diesem Beispiel wird das Hintergrundbild beim Hover über das Element geändert.

2. **Bild im `<img>`-Tag austauschen**:
Wenn du ein `<img>`-Tag verwendest, kannst du das Bild mit JavaScript oder CSS (z.B. durch Klassenwechsel) ändern. Hier ein Beispiel mit CSS:

```html
<img src="bild1.jpg" class="image" alt="Bild">

<style>
.image {
transition: opacity 0.5s;
}

.image:hover {
content: url('bild2.jpg');
}
</style>
```

Beachte, dass die Verwendung von `content` in CSS für `<img>`-Tags nicht standardmäßig unterstützt wird. Daher ist die erste Methode mit `background-image` oft die bessere Wahl.

Für dynamische Änderungen ist JavaScript eine geeignete Lösung.