Html 调整无序列表中背景图像的大小（li）

我有一个无序的列表，每行有一定的大小，每行都有一个背景，我想调整背景的大小，使其完全适合盒子的宽度，我已经尝试过了，但无法让它工作，我已经制作了一个简化版的JSFIDLE-

HTML

---

希望有人能为我将图像缩放到框中。

您的问题是您正在CSS中设置

背景大小：封面

，但正在通过内联样式设置

背景

。是一种简写属性，包括以下内容：

• 背景尺寸

• 背景色

• 背景图像

• 背景位置

• 背景重复

• 背景附件

将值设置为

background

属性时，URL将应用于

背景图像

，其他属性将设置为其初始值。以下是报告的内容：

给定一个有效声明，对于每一层，速记首先将“背景图像”、“背景位置”、“背景大小”、“背景重复”、“背景原点”、“背景剪辑”和“背景附件”中每一层的对应层设置为该属性的初始值，然后在声明中为该层指定任何显式值。最后，“背景色”设置为指定的颜色（如果有），否则设置为其初始值

这将防止您的

背景大小（通过CSS设置）产生任何影响。
您应该直接使用内联样式设置
背景图像
（或者再次设置
背景大小
）


li{
列表样式：无；
颜色：白色；
左侧填充：0pt；
边际上限：0px；
背景尺寸：封面；
高度：60px；
宽度：270px；
}
保险商实验室{
左侧填充：0px；
填充顶部：0px；
}


惊奇漫画的复仇者大会-S3E1
适应变化


惊奇漫画的复仇者大会-S3E1
适应变化


惊奇漫画的复仇者大会-S3E1
适应变化

与其尝试将图像设置为背景，不如使用img元素来显示li内部的图像。然后将文本和img设置为
位置：绝对并将li设置为
位置：相对。您还需要将文本和img设置为
top:0px


li{
列表样式：无；
颜色：白色；
左侧填充：0pt；
边际上限：0px；
位置：相对位置；
}	
李英明{
位置：绝对位置；
顶部：0px；
}
李斯潘{
位置：绝对位置；
顶部：0px；
}
保险商实验室{
左侧填充：0px；
填充顶部：0px；
}


惊奇漫画的复仇者大会-S3E1
适应变化

对不起，我不太明白，背景图像行来自php foreach语句，因此它们需要内联定义，你是说我需要内联设置大小，而不是通过css？你能给我看看小提琴上的“固定”吗？谢谢你花时间来帮助我。好的，我现在看到你的例子了，对不起，我在电话上，稍后会尝试标记为答案。非常感谢。Legend，您上一次100%100%的编辑完成了我的目标：）非常感谢您花时间帮助我。：）啊，我从来没有投票赞成，只是投票作为答案，我为之前没有投票的人感到难过：（@ USER 3668 497：我明白了。我只是在开玩笑，因为你叫我传奇（人们不应该要求投票），但是感谢投票：），你应该普遍考虑使用选票，因为他们也是一个有用的答案的指示器。你甚至可以在同一个帖子中投票给多个答案，前提是这些答案都很有用，但并非所有帖子都必须投票。
<ul>
  <li style='border: 1px solid black; background: url(http://i67.tinypic.com/xlcq5w.jpg)'>
    <span style="background-color: #000000">
      Marvel's Avengers Assemble - S3E1 </br>
      Adapting to Change
    </span>
  </li>
</ul>

li{
  list-style:none;
  color: white  ;
  padding-left: 0pt;
  margin-top:0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 60px;
  width: 270px;
}   

ul {
  padding-left: 0px;
  padding-top: 0px;
}