p標簽： CSS是網頁設計中必不可少的一部分，圖像設計也是如此。本文將介紹如何通過CSS疊加圖片來達到不一樣的效果。 pre標簽：.image-before { position: relative; } .image-before::before { content: ""; background-image: url("img/background.png"); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; } .image-before::after { content: ""; background-image: url("img/foreground.png"); position: absolute; top: 50px; left: 50px; width: 200px; height: 200px; opacity: 1; } p標簽： 首先，我們先將圖片放在一個容器內，這里我們用position屬性來定義容器的位置。接下來我們可以分別創建子元素::before和::after來定義背景圖片和前景圖片。其中::before元素使用了opacity: 0.5來設置透明度，而::after元素則是完全不透明。 pre標簽：.image-overlay { position: relative; } .image-overlay::before { content: ""; background-image: url("img/background.png"); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .image-overlay::after { content: ""; background-image: url("img/foreground.png"); position: absolute; top: 50px; left: 50px; width: 200px; height: 200px; z-index: 1; } p標簽： 另一種方法是使用z-index屬性，原理類似于前面的方法，只是把它們放在不同的層級里。::before元素被放在底部，而::after元素則放在頂部。這個技巧是在網站上放置大型背景圖像時非常有用的。 通過這2種方法，我們可以輕松地制作出復雜且引人注目的圖片效果。我們現在已經掌握了如何通過CSS在網頁上疊加不同的圖片。