CSS代碼可以用來定義網頁的樣式，也可以用來將圖片轉換成CSS代碼實現多彩的網頁效果。

現在我們來看一下如何將圖片轉換成CSS代碼。

.icon {
width: 50px;
height: 50px;
background-image: url('icon.png');
background-repeat: no-repeat;
background-size: 100%;
}

在上面的CSS代碼中，我們定義了一個名為.icon的類，該類用來顯示一個50x50像素的圖標。圖標的圖片使用背景圖片的方式定義，圖片的URL為icon.png，不進行平鋪，圖片完全自適應容器大小。

這樣的CSS代碼可以在網頁中輕松地調用，通過改變background-image屬性的值可以實現更多的效果。

需要注意的是，CSS代碼轉換圖片雖然很方便，但是也會增加網頁的加載時間，影響用戶的瀏覽體驗。因此在使用時需要權衡好這兩點。