如何为HTML的<li>标签设置背景图片或背景颜色？

没问题，我来帮你搞定这个需求！结合你给出的HTML结构，我们可以用CSS轻松实现给这些分类列表的<li>标签添加背景色或者背景图片，下面分两种情况详细说明：

一、设置背景颜色 #

方法1：批量设置（推荐，更易维护） #

在你的HTML页面的<head>标签里添加内部CSS样式，这样能一次性给所有.type-videos下的<li>设置背景色，不会影响页面其他列表：

<style>
/* 给分类列表的每个li设置背景色 */
.type-videos ul li {
    background-color: #f5f5f5; /* 浅灰色，你可以换成任意颜色值，比如#ffcccc或者red */
    padding: 8px 12px; /* 可选，加内边距让内容和背景更协调 */
    margin-bottom: 4px; /* 可选，给li之间加间距 */
}

/* 可选：调整链接文字颜色，避免和背景色冲突 */
.type-videos ul li a {
    color: #333; /* 深灰色文字，根据背景色调整 */
    text-decoration: none; /* 可选，去掉链接下划线 */
}
</style>

方法2：单个li单独设置 #

如果只想给某一个<li>加背景色，可以直接用内联样式：

<li style="background-color: #ffeb3b; padding: 8px 12px;"><a href="#">Korean Drama</a></li>

二、设置背景图片 #

同样用CSS来实现，注意要指定图片路径，同时可以搭配背景属性让图片显示更美观：

<style>
.type-videos ul li {
    background-image: url('你的图片路径.jpg'); /* 替换成你的图片实际路径 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-size: cover; /* 让图片覆盖整个li区域，保持比例 */
    background-position: center; /* 图片居中显示 */
    padding: 12px;
    color: white; /* 因为背景图可能较深，设置白色文字更清晰 */
}

.type-videos ul li a {
    color: white;
    text-decoration: none;
    display: block; /* 让链接占满li区域，点击更方便 */
}
</style>

如果你的背景图是小图标（比如左侧的分类图标），可以调整background-size为20px 20px，再设置background-position: left center，让图标靠左显示，给文字留出足够空间。

内容的提问来源于stack exchange，提问作者Takahiro