Question

所以，我有这个html结构：

<li class="block1">
     <a title="Block 1 Title" href="get/wzTZKKrI1kQ">
          <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg">
          <span>Block 1 Title</span>
     </a>
</li>

这个.css代码：

#home #results li{
  float: left;
  list-style: none;
  margin: 0 10px 10px 0;
  display: inline-block;
  height: 200px;
  width: 200px;
  padding: 10px;
  overflow:hidden;
  text-align: left;
  /*background: #E1D4C0;*/
}
#home #results li.block1{ 
  background: #E1D4C0 url("../imgs/bg/lp-bg.png") no-repeat top center;
  z-index: 1
}

但出于某种原因， #home #results li.block1 背景img显示在html img / #home #results li img / #home #results li.block1后面背景图片显示在<li><a><img>

后面

为什么会这样？我试过z-index而没有成功

编辑：截图：http://awesomescreenshot.com/068s3wo8e

我已设法修复它，请查看下面的答案。

Answer 1

此行为是设计和预期的。 lp-bg.png是li.block1的背景图片。您的<img>是<li class="block1">的元素。

以这种方式思考 - <li class="block1">是你的画布......你添加的所有内容，你都画在画布上。

也许您需要切换每个元素正在显示的图像。

Answer 2

我认为第一个是推翻第二个。你可以尝试给第二个人另一个名字。这是我现在唯一能想到的。

Answer 3

通过执行以下操作来修复它：

HTML：

<li class="block1">
     <a title="Block 1 Title" href="get/wzTZKKrI1kQ">
        ---->> <div></div> <<----
          <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg">
          <span>Block 1 Title</span>
     </a>
</li>

的CSS：

 #home #results li{
      float: left;
      width: 200px;
      height: 200px;
      padding: 10px;
      margin: 0 10px 10px 0;
      display: inline;
      text-align: left;
      position: relative;
      background: #E1D4C0;
   }
   #home #results li.block1 div{ 
      width: 226px;
      height: 238px;
      background: url("../imgs/apis/lp-bg.png") no-repeat top center;
      position: absolute;
      z-index: 10;
      left: 0px;
      top: -7px;
   }

说明：

我在标记内添加了一个空div （注意：里面所以它使图像覆盖了li 可点击），而不是添加了position: relative; li本身，以便将其作为li.block1 div的参考，并将其设置为width: 226px; height: 238px; position: absolute; z-index: 10。

宽度和高度是图像的值保持在顶部，位置和z-index使其保持在li的顶部，其余的只是使其适合所需位置的规则。

我希望我解释得很好，所以其他人可以在这种情况下使用这个答案，如果没有，只需评论，我会很乐意提供帮助！

LI背景图像显示在li＆gt;背后。 IMG

3 个答案: