在CSS中，我們可以使用多種方法給ol的數(shù)字添加背景，以下是一些常見的做法：
1、使用偽元素（Pseudo-elements）：
通過::before或::after偽元素，我們可以在ol的數(shù)字前后添加背景，給數(shù)字添加背景色：
```css
ol {
list-style-type: none;
counter-reset: li-counter;
}
ol li {
counter-increment: li-counter;
position: relative;
}
ol li::before {
content: counter(li-counter);
position: absolute;
left: -20px;
background-color: #f0f0f0;
padding: 5px;
border-radius: 3px;
}
```
2、使用背景圖片：
可以使用背景圖片來裝飾ol的數(shù)字，給數(shù)字添加背景圖案：
```css
ol {
list-style-type: none;
counter-reset: li-counter;
}
ol li {
counter-increment: li-counter;
position: relative;
}
ol li::before {
content: counter(li-counter);
position: absolute;
left: -20px;
background-image: url('background.png');
background-size: cover;
}
```
3、使用CSS變量：
可以使用CSS變量來定義和修改ol的數(shù)字背景，定義一個(gè)背景樣式并應(yīng)用到所有ol數(shù)字上：
```css
:root {
--ol-number-background: #f0f0f0;
--ol-number-padding: 5px;
--ol-number-border-radius: 3px;
}
ol {
list-style-type: none;
counter-reset: li-counter;
}
ol li {
counter-increment: li-counter;
position: relative;
}
ol li::before {
content: counter(li-counter);
position: absolute;
left: -20px;
background-color: var(--ol-number-background);
padding: var(--ol-number-padding);
border-radius: var(--ol-number-border-radius);
}
```
然后在JavaScript中修改這些變量來更新背景樣式，這種方法提供了更大的靈活性和可維護(hù)性。
