CSS Bildstile einstellen

Lerne, wie du mit CSS Bildstile einstellst.

Abgerundete Bilder

verwende border-radius Eigenschaft erstellt kreisförmige Bilder:

Beispiel

Abgerundete Bilder:

img {
  border-radius: 8px;
}

Versuchen Sie es selbst

Beispiel

Kreisförmige Bilder:

img {
  border-radius: 50%;
}

Versuchen Sie es selbst

Miniaturbild

verwende border Eigenschaft erstellt Miniaturansichten.

Miniaturansicht:

Kaffee

Beispiel

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Versuchen Sie es selbst

als Miniaturansicht des Links:

Beispiel

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Versuchen Sie es selbst

Responsibles Bild

Responsible Bilder passen sich automatisch an die Bildschirmgröße an.

Falls du das Bild nach Bedarf verkleinern möchtest, aber sicherstellen möchtest, dass es nicht größer als die ursprüngliche Größe wird, füge folgenden Code hinzu:

Beispiel

img {
  max-width: 100%;
  height: auto;
}

Versuchen Sie es selbst

Tipp:In unserem CSS RWD-Tutorial Lerne mehr über responsives Web-Design.

Zentriertes Bild

Um ein Bild zentral auszurichten, setze die horizontalen Außenränder auf auto und setze es zu einem Block-Element:

Kaffee

Beispiel

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Versuchen Sie es selbst

Polaroid Bild / Karte

Tulpe

Gelbe Tulpe

Tulpe

Rote Tulpe

Beispiel

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

Versuchen Sie es selbst

Transparente Bilder

opacity Der Wertebereich des Attributs beträgt 0.0 - 1.0. Je niedriger der Wert, desto transparenter ist der Wert:

Tulpe

opacity 0.2

Tulpe

opacity 0.5

Tulpe

opacity 1 (Standard)

Beispiel

img {
  opacity: 0.5;
}

Versuchen Sie es selbst

Bilde_text

Wie Sie Text im Bild positionieren können:

Beispiel

CodeW3C.com Logo
Unten Links
Oben Links
Oben Rechts
Unten Rechts
Zentriert

Probieren Sie es selbst aus:

Oben Links Oben Rechts Unten Links Unten Rechts Zentriert

Bildfilter

CSS filter Das Attribut fügt visuelle Effekte (wie Unschärfe und Sättigung) zu Elementen hinzu.

Hinweis:Internet Explorer oder Edge 12 unterstützen das filter-Attribut nicht.

Beispiel

Ändern Sie die Farben aller Bilder in Schwarzweiß (100% Grau):

img {
  filter: grayscale(100%);
}

Versuchen Sie es selbst

Tipp:Besuchen Sie unsere CSS-Filter-Referenzhandbuch，um mehr über CSS-Filter zu erfahren.

Bildüberlagerung bei der Mausüberlagerung

Erstellen Sie eine叠加效果 für die Mausüberlagerung:

Beispiel 1

Einblendtext:

Avatar
Hallo Welt

Versuchen Sie es selbst

Beispiel 2

Einblendbox:

Avatar
Bill

Versuchen Sie es selbst

Beispiel 3

Einrollen (oben):

Avatar
Hallo Welt

Versuchen Sie es selbst

Beispiel 4

Einrollen (unten):

Avatar
Hallo Welt

Versuchen Sie es selbst

Beispiel 5

Einrollen (links):

Avatar
Hallo Welt

Versuchen Sie es selbst

Beispiel 6

Einrollen (rechts):

Avatar
Hallo Welt

Versuchen Sie es selbst

Bild umdrehen

Bewegen Sie den Mauszeiger auf das Bild:

Sportpark

Beispiel

img:hover {
  transform: scaleX(-1);
}

Versuchen Sie es selbst

Responsives Bildarchiv

Wir können mit CSS eine anpassungsfähige Bildergalerie erstellen.

In diesem Beispiel wird eine Medienabfrage verwendet, um die Anordnung von Bildern bei verschiedenen Bildschirmgrößen zu ändern. Passen Sie die Größe des Browserfensters an, um die Ergebnisse zu sehen:

Beispiel

.responsive {}}
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {}}
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {}}
    width: 100%;
  }
}

Versuchen Sie es selbst

Tipp:Besuchen Sie unsere CSS RWD-Tutorial Lernen Sie mehr über Responsive Web Design.

Bildmodaldialog (Image Modal)

Dies ist ein Beispiel, wie CSS und JavaScript zusammenarbeiten.

Zunächst erstellen Sie bitte ein Modaldialogfeld (Dialog) mit CSS und verstecken Sie es standardmäßig.

Dann, wenn der Benutzer auf das Bild klickt, zeigt das JavaScript ein Modaldialogfeld an und zeigt das Bild im Inneren an:

Grünfläche

Versuchen Sie es selbst