Anzeigen von Bildern
Gerundet:
Kreis:
Begrenzt:
Text:
Natur
Abgerundete Bild
Die w3-Runde Klasse fügt Ecken auf ein Bild gerundet:
eingekreist Bild
Die w3-Kreisklasse formt ein Bild auf einem Kreis:
Grenzt Bild
Die w3-Grenze - Klasse fügt Rahmen um das Bild:
Hoverable Bild
Die w3-Hover-Opazität - Klasse fügt Transparenz auf das Bild auf Mouse-Over:
Bild als Karte
Wickeln Sie einen der w3-karten- * Klassen rund um das Element <img> es als Karte anzuzeigen (Schatten hinzufügen):
Simon
Der Chef aller Chefs
Bild-Text
Positionieren Sie den Text in einem Bild mit den w3-Display- Klassen:
Oben links
Oben rechts
Unten links
Rechts unten
Mitte
Beispiel
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> Versuch es selber " Konstruieren eines Fotoalbum
In diesem Beispiel verwenden wir das W3.CSS Responsive Grid System ein Fotoalbum zu erstellen, die auf allen Geräten gut aussieht. Sie werden später mehr darüber zu erfahren.
Sommer 2015
5 Terre
Monte
Vernazza
Manarola
Corniglia
Riomaggiore
Beispiel
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Versuch es selber "