HTML 无序列表项目符号使用图片的CSS写法

要使用图片作为HTML无序列表的项目符号，需要使用CSS的list-style-type属性以及background-image属性来实现。

具体步骤如下：

1. 选择一个符合要求的图片作为无序列表项目符号。

2. 在CSS文件中设置ul或ol的list-style-type属性为none，取消默认的项目符号。

3. 针对每个项目单独设置background-image属性，并将图片链接作为属性值。

4. 调整background-position属性以及图片大小等属性，使图片符号与文本对齐并达到理想的视觉效果。

以下是两个示例：

示例一：使用本地图片作为项目符号

HTML代码：

<ul>
    <li>苹果</li>
    <li>橙子</li>
    <li>葡萄</li>
</ul>

CSS代码：

ul {
    list-style-type: none;
}
li {
    background-image: url(./fruit.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0 50%;
    padding-left: 25px;
}

解释：这里使用一个名为fruit.png的本地图片作为项目符号，设定图片大小为20px*20px，位于文本左侧，垂直对齐中心线，同时设定了左侧25px的padding，避免图片与文本重叠。

示例二：使用在线图片作为项目符号

HTML代码：

<ul>
    <li>微信</li>
    <li>QQ</li>
    <li>微博</li>
</ul>

CSS代码：

ul {
    list-style-type: none;
}
li:nth-child(1) {
    background-image: url(https://cdn-icons-png.flaticon.com/512/134/134939.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 0 50%;
    padding-left: 30px;
}
li:nth-child(2) {
    background-image: url(https://cdn-icons-png.flaticon.com/512/1384/1384060.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 0 50%;
    padding-left: 30px;
}
li:nth-child(3) {
    background-image: url(https://cdn-icons-png.flaticon.com/512/2111/2111463.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 0 50%;
    padding-left: 30px;
}

解释：这里使用三个在线图片作为项目符号，通过设置不同的nth-child选择器来为每个项目单独设置不同的背景图片。同时也调整了间距和图片大小，以达到更好的排版效果。

以上就是使用CSS实现HTML无序列表项目符号使用图片的完整攻略。