圖片與網頁設計密切相關，而CSS（層疊樣式表）則是現代網頁設計不可或缺的一部分。那么如何將圖片變為CSS格式？這里介紹一種簡單的方法。

首先，我們需要將要轉換的圖片上傳至一個圖片轉CSS網站。現在有很多這種網站，例如 “csssprites.com”和“spritegen.website-performance.org”. 這些網站會將你的圖片轉換為css格式，你可以復制粘貼這段CSS代碼到你的網頁中。

.img {
background-image: url("img.png");
background-position: 0px 0px;
width: 20px;
height: 20px;
}

上述代碼將把圖像“img.png”轉化為一個CSS類“img”。在你的HTML代碼中，可以通過以下方式來使用它：

<div class="img"></div>

這里，我們用一個 div 標簽并指定 class 名稱，然后在 CSS 中設置背景圖像。通過調整 background-position 屬性，我們可以顯示不同位置的圖片（可以將圖片視為一個長長的網格，每一個小方塊代表圖片中的一個像素，通過設置 background-position 屬性，可以控制顯示哪個像素）。

值得注意的是，如果你需要在網站中使用大量圖像，那么可以將多個圖片合并成一張大圖（我們稱之為 CSS 精靈，或者 sprite）。這樣做是出于性能優化的角度，因為在下載一個大圖的情況下，你可以通過CSS只讀取或呈現所需的部分，而不需要反復加載許多小的圖像。你可以使用一些工具來快速制作CSS精靈，像 TexturePacker 或者 Sprite Cow。這些工具通常可以將一組圖片壓縮成一張超大的PNG文件，并生成相應的CSS代碼。

總結一下，將圖片轉換為 CSS 是一個簡單的方法，能夠幫助你更好地控制網站的圖像。有了這種技能，你就可以輕松的構建網站并在用戶體驗和性能之間取得平衡。