So legen Sie ein IMG-Bild in CSS fest

CSS-Stile werden verwendet, um die Darstellung von Webseitenelementen zu steuern, einschließlich Text, Bildern, Farben, Layout usw. Wenn Sie ein Bild auf einer Webseite platzieren möchten, müssen Sie CSS verwenden, um Größe, Position, Rahmen, Hintergrund und andere Attribute des Bildes zu steuern. Heute erklären wir, wie man CSS zum Festlegen von IMG-Bildern verwendet.

1. Stellen Sie die Bildgröße ein

Um die Bildgröße in CSS festzulegen, können Sie die Attribute width und height verwenden. Um beispielsweise die Breite eines Bildes auf 200 Pixel und die Höhe auf 150 Pixel festzulegen, würden Sie schreiben:

img {
  width: 200px;
  height: 150px;
}

Dadurch werden alle IMG-Tags 200 x 150 Pixel groß.

Wenn nur eine der Eigenschaften festgelegt ist, behält das Bild seine ursprüngliche Skalierung bei. Zum Beispiel:

img {
  width: 200px;
}

Dadurch beträgt die Breite des Bildes 200 Pixel und die Höhe wird proportional skaliert.

2. Legen Sie den Bildrand fest

Sie können das Randattribut verwenden, um den Bildrand in CSS festzulegen. Um beispielsweise den Rand eines Bildes auf Rot und 2 Pixel breit einzustellen, können Sie schreiben:

img {
  border: 2px solid red;
}

Dadurch wird allen Bild-Tags ein roter Rand mit einer Breite von 2 Pixeln hinzugefügt. Der Effekt ist wie folgt:

3. Legen Sie die abgerundeten Ecken des Bildes fest

Um die abgerundeten Ecken des Bildes in CSS festzulegen, können Sie das Attribut border-radius verwenden. Um beispielsweise festzulegen, dass die vier Ecken eines Bildes mit einem Radius von 10 Pixeln abgerundet werden, können Sie Folgendes schreiben:

img {
  border-radius: 10px;
}

Dadurch werden die vier Ecken aller img-Tags abgerundet.

Wenn Sie festlegen möchten, dass nur eine bestimmte Ecke abgerundet wird, können Sie so schreiben:

img {
  border-top-left-radius: 10px;
}

Dadurch wird die obere linke Ecke abgerundet und die anderen Ecken bleiben rechts.

4. Legen Sie den Bildhintergrund fest.

Um den Bildhintergrund in CSS festzulegen, können Sie das Hintergrundattribut verwenden. Um beispielsweise den Hintergrund eines Bildes in Grau zu ändern, können Sie schreiben:

img {
  background: gray;
}

Dadurch wird der Hintergrund aller IMG-Tags grau.

Wenn Sie nur die Hintergrundfarbe des mittleren Teils des Bildrandes ändern möchten, können Sie das Attribut „Hintergrundfarbe“ zusammen mit dem Attribut „Rahmen“ verwenden. Zum Beispiel:

img {
  border: 2px solid red;
  background-color: gray;
}

Dadurch wird die Hintergrundfarbe in der Mitte des Bildrandes in Grau geändert.

5. Legen Sie die Bildposition fest

Um die Bildposition in CSS festzulegen, können Sie die Attribute „Rand“ und „Padding“ verwenden. Um beispielsweise den Rand eines Bildes auf 20 Pixel festzulegen, würden Sie schreiben:

img {
  margin: 20px;
}

Dadurch werden alle IMG-Tags 20 Pixel von ihrer Umgebung entfernt.

Wenn Sie den Abstand zwischen dem Bild und umgebenden Elementen ändern möchten, können Sie das Padding-Attribut verwenden. Um beispielsweise den Abstand eines Bildes auf 10 Pixel festzulegen, schreiben Sie:

img {
  padding: 10px;
}

Dadurch bleiben alle IMG-Tags 10 Pixel von umgebenden Elementen entfernt.

Zusammenfassend lässt sich sagen, dass wir Bilder auf Webseiten über CSS-Stile steuern können, einschließlich Größe, Position, Rahmen, Hintergrund und anderer Attribute. Durch das Festlegen von Bildstilen können Webseiten schöner und für Leser leichter lesbar gemacht werden.

Das obige ist der detaillierte Inhalt vonSo legen Sie ein IMG-Bild in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!