在網頁設計中，使用背景圖可以使頁面更加豐富多彩。在CSS中，也可以輕松設置背景圖，本文將介紹如何在CSS中設置兩張不同的背景圖，并讓它們呈現出不同的效果。

首先，我們來看一張圖片：

<style>
.demo1 {
background-image: url('background1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="demo1"></div>

這是一張鋪滿整個背景的背景圖，它的圖片鏈接為“background1.jpg”，使用了“background-image”屬性來設置背景圖，使用“background-repeat”屬性設置不重復，使用“background-size”屬性設置背景圖的大小為“cover”，即讓背景圖盡可能地覆蓋容器。

接下來，我們再來看一張圖片：

<style>
.demo2 {
width: 300px;
height: 300px;
background: url('background2.jpg') center center no-repeat;
background-size: contain;
}
</style>
<div class="demo2"></div>

這張圖片則是放置在容器中的，它的圖片鏈接為“background2.jpg”，使用了“background”屬性來設置背景圖，使用“background-size”屬性設置背景圖的大小為“contain”，即讓背景圖完全呈現在容器內。

通過以上兩種設置方法，可以輕松在CSS中設置背景圖并呈現出不同的效果，實現更加多樣化的網頁設計。