在CSS中，我們可以使用兩張背景圖片來實(shí)現(xiàn)一些特殊的效果，比如創(chuàng)建一個3D樣式的背景，或者實(shí)現(xiàn)一個帶有紋理的背景，下面是一些關(guān)于如何在CSS中使用兩張背景圖片的方法。

1、使用CSS的background-image屬性：

我們可以使用background-image屬性來設(shè)置兩張背景圖片，***張圖片作為主背景，第二張圖片作為前景。

body {
    background-image: url('main_background.png'), url('foreground.png');
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
}

在這個例子中，main_background.png作為主背景圖片，顯示在頁面的頂部左側(cè)；foreground.png作為前景圖片，顯示在頁面的頂部右側(cè)，兩張圖片都不會重復(fù)。

2、使用CSS的@keyframes動畫：

我們可以使用@keyframes動畫來創(chuàng)建一些動態(tài)的背景效果，我們可以讓前景圖片在鼠標(biāo)懸停時放大：

@keyframes foreground_zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
body {
    background-image: url('main_background.png'), url('foreground.png');
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
}
body:hover #foreground {
    animation: foreground_zoom 0.5s ease-in-out;
}

在這個例子中，當(dāng)鼠標(biāo)懸停在頁面上時，前景圖片會放大到1.5倍，然后逐漸縮小回原來的大小。

使用兩張背景圖片在CSS中可以實(shí)現(xiàn)一些非常有趣的效果，通過巧妙地設(shè)置background-image屬性和使用動畫，我們可以創(chuàng)建出一些非常吸引人的背景效果。