在網頁設計過程中，經常會用到PNG圖片。這種格式的圖片可以在保證透明度的同時提供精細的圖像。在CSS中，我們可以很方便地使用PNG圖片。

background-image: url("image.png");
background-repeat: no-repeat;
background-size: contain;

這一段代碼是設置一個PNG圖片作為背景。其中，background-image用于指定圖片路徑，background-repeat用于控制圖片是否重復，background-size用于指定圖片在元素中的大小。

如果我們希望將PNG圖片作為元素的背景，并且自適應元素大小，我們可以這么做：

div{
background-image: url("image.png");
background-repeat: no-repeat;
background-size: cover;
}

此時，PNG圖片將填滿整個div元素，而且不會變形。如果我們不希望圖片變形，可以使用background-size: contain屬性。

還有一種情況是，我們需要在頁面中使用PNG圖片作為裝飾物。比如，在文字前面加上一個小圖標。這時，我們可以這么寫：

span{
display: inline-block;
background-image: url("image.png");
background-repeat: no-repeat;
width: 20px;
height: 20px;
}

這一段代碼將創建一個20x20的塊狀元素，并將PNG圖片作為其背景。由于元素是塊狀的，我們需要將其display屬性設置為inline-block。

總之，CSS是一個非常強大的工具，我們可以通過掌握一些基本的屬性，輕松地設置PNG圖片。