在 css 中可以疊加圖片到背景圖片上，方法包括：指定圖片 url（1）、調整位置（2）、設置大小（3）、控制透明度（4）、使用 css 濾鏡（5）。
如何在 CSS 中在背景圖片上疊加圖片
在 CSS 中，可以在背景圖片上疊加圖片，從而創建更豐富、更具視覺吸引力的設計。以下是如何實現：
1. 使用 background-image 屬性
使用 background-image 屬性指定疊加圖片的 URL。可以使用多個背景圖片，用逗號分隔：
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">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 屬性模糊疊加圖片：
<code class="css">filter: blur(5px);</code>
登錄后復制
通過結合這些屬性，可以創建各種效果，例如：
在背景圖片上添加水印
在背景圖片上疊加文本
創建疊加陰影或高光效果
