CSS自定義變量是一種非常有用的工具，可以讓我們更方便地管理和改變樣式。其中一種常見的應用是在圖片中使用自定義變量，讓圖片樣式更加統一和易于修改。

為了使用自定義變量來控制圖片樣式，我們需要先在CSS中定義它們。這可以通過在根元素上使用--variable-name: value的語法來完成，其中variable-name就是變量名稱，value是賦給該變量的值。

:root {
--primary-color: #34495e;
--secondary-color: #e74c3c;
}

在定義好變量后，我們可以通過在background-image，background-color等屬性中使用var()函數來引用變量。例如，下面的CSS將使用定義好的變量來設置圖片樣式：

.image {
background-image: url(image.png);
background-color: var(--primary-color);
border-color: var(--secondary-color);
}

在上面的代碼中，我們使用了定義好的--primary-color和--secondary-color變量來分別設置背景色和邊框顏色。當我們需要修改這些顏色時，只需要修改定義變量的值，就可以同時更新所有引用該變量的圖片樣式。

通過在CSS中使用自定義變量來控制圖片樣式，可以讓我們更加靈活和高效地管理圖片。我們只需要定義一次變量，即可在整個項目中重復利用，不需要每次都重新編寫CSS樣式。這不僅可以提高開發效率，也可以讓我們的代碼更加易于維護。