So fügen Sie in CSS ein Bild zum Hintergrundbild hinzu

In CSS können Sie Bilder über Hintergrundbilder legen. Zu den Methoden gehören: Angabe der Bild-URL (1), Anpassen der Position (2), Festlegen der Größe (3), Steuern der Transparenz (4) und Verwenden von CSS-Filtern (5).

So überlagern Sie ein Bild mit einem Hintergrundbild in CSS

In CSS können Sie ein Bild mit einem Hintergrundbild überlagern, um ein reichhaltigeres, optisch ansprechenderes Design zu erstellen. So geht's:

1. Verwenden Sie das Attribut background-image background-image 属性

使用 background-image 属性指定叠加图片的 URL。可以使用多个背景图片，用逗号分隔：

<code class="css">background-image: url("background-image.png"), url("overlay-image.png");</code>

2. 调整叠加图片的位置

默认情况下，叠加图片会覆盖整个背景图像。若要调整叠加图片的位置，可以使用 background-position 属性：

<code class="css">background-position: center center, top left;</code>

3. 设置叠加图片的尺寸

可以使用 background-size 属性设置叠加图片的尺寸：

<code class="css">background-size: contain, 50% 50%;</code>

4. 控制叠加图片的透明度

通过使用 background-blend-mode 属性，可以混合背景图片和叠加图片：

• normal：叠加图片完全覆盖背景图片。
• multiply：叠加图片的颜色与背景图片的颜色相乘，产生较暗的效果。
• screen：叠加图片的颜色与背景图片的颜色相减，产生较亮的效果。

示例：

<code class="css">background-blend-mode: multiply;</code>

5. 使用 CSS 滤镜

CSS 滤镜可以应用于叠加图片，以进一步增强其视觉效果。例如，可以使用 filter

Verwenden Sie das Attribut background-image, um die URL des Overlay-Bildes anzugeben. Es können mehrere Hintergrundbilder verwendet werden, die durch Kommas getrennt sind:

<code class="css">filter: blur(5px);</code>

• 2 Passen Sie die Position des Overlay-Bildes an
• Standardmäßig deckt das Overlay-Bild das gesamte Hintergrundbild ab. Um die Position des Overlay-Bildes anzupassen, können Sie das Attribut background-position verwenden:
• rrreee

3 Um die Größe des Overlay-Bildes festzulegen 🎜🎜🎜 können Sie das Attribut background verwenden -size-Attributeinstellung Die Größe des Overlay-Bildes: 🎜rrreee🎜🎜4. Steuern Sie die Transparenz des Overlay-Bildes🎜🎜🎜Mit dem background-blend-mode-Attribut können Sie dies tun Mischen Sie das Hintergrundbild und das Overlay-Bild: 🎜🎜🎜normal : Das Overlay-Bild deckt das Hintergrundbild vollständig ab. 🎜🎜multiplizieren: Multiplizieren Sie die Farbe des Overlay-Bilds mit der Farbe des Hintergrundbilds, um einen dunkleren Effekt zu erzielen. 🎜🎜screen: Subtrahieren Sie die Farbe des Overlay-Bilds von der Farbe des Hintergrundbilds, um einen helleren Effekt zu erzielen. 🎜🎜🎜Beispiel: 🎜rrreee🎜🎜5. Verwendung von CSS-Filtern 🎜🎜🎜CSS-Filter können zum Überlagern von Bildern angewendet werden, um deren visuelle Wirkung weiter zu verbessern. Sie können beispielsweise das Attribut filter verwenden, um ein Overlay-Bild unscharf zu machen: 🎜rrreee🎜Durch die Kombination dieser Attribute können Sie verschiedene Effekte erzeugen, wie zum Beispiel: 🎜🎜🎜Fügen Sie einem Hintergrundbild ein Wasserzeichen hinzu 🎜 🎜Overlay-Text auf einem Hintergrundbild 🎜🎜Erstellen Sie Overlay-Schatten- oder Hervorhebungseffekte🎜🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie in CSS ein Bild zum Hintergrundbild hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!