LI фоновое изображение показывает позади li> img

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 background 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

Исправлено:

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 clickable ), чем я добавил position: relative; к самому li, чтобы иметь его в качестве ссылки для li.block1 div и установите его с помощью width: 226px; height: 238px; position: absolute; z-index: 10.

. Ширина и высота - это значения изображения, которые останутся сверху, а также положение и z-индекс, чтобы оно оставалось поверх li, остальные - просто правила.чтобы он поместился в нужной позиции.

Я надеюсь, что объяснил достаточно хорошо, чтобы другие могли использовать этот ответ, если когда-либо в такой ситуации, а если нет, просто прокомментируйте, и я буду рад помочь!

Answer 3

Я думаю, что первый отвергает второй. Вы можете попытаться дать второму имя другое. Это единственное, о чем я могу думать прямо сейчас.