Блог

Главная - Вопросы по программированию - Показывать фон родительского контейнера поверх дочернего img

Показывать фон родительского контейнера поверх дочернего img

#javascript #html #css

#javascript #HTML #css

Вопрос:

http://jsfiddle.net/33g7e/2/

Это пример HTML:

 <div class="container">
    <ul class="menu">
        <li><img src="http://i.imgur.com/XecoFpD.jpg" /></li>
    </ul>
</div>

CSS:

 .container {
    background: url('http://i.imgur.com/mQ0MeUc.png') no-repeat left top transparent;
    display: block;
}
ul.menu {
    padding: 0;
    width: 400px;
    height: 300px;
}
ul.menu li {
    list-style: none;
}

Под элементом img есть скрытый фон (черная полоса), вы можете увидеть его, если удалите img. Поэтому мне нужно показать его поверх изображения без изменения структуры html.

Комментарии:

1. Это <ul><li>, если быть точным. Я обновил код.

2. Я пока не знаю почему, но background атрибут, указанный .container в коде CSS, явно не работает.

3. Да, черная полоса исчезла после того, как я добавил <ul> , снова скорректировал CSS, проверьте сейчас.

4. У меня все еще не работает @OptimusPrime

5. @OptimusPrime сделал ДЕМОНСТРАЦИЮ. проверьте мой ответ.

Ответ №1:

Вы можете попробовать это:

Демонстрация: показывать при наведении курсора мыши

Демонстрация 2

 <div class="container">
    <ul><li><img src="http://i.imgur.com/XecoFpD.jpg" /></li></ul>
</div>

Комментарии:

1. В этой демонстрации это работает только при наведении на него курсора мыши.

Ответ №2:

Вот код CSS.Проверьте ДЕМОНСТРАЦИЮ.

 ul.container li img {
    display:block;
    position:relative;
    z-index:-1;
}

.container{
background: url('http://i.imgur.com/mQ0MeUc.png') no-repeat left top transparent;
}

HTML-код

 <ul class="container">
    <li><img src="http://i.imgur.com/XecoFpD.jpg" /></li>
</ul>

Комментарии:

1. Я предпочитаю jsbin over jsfiddle . вы можете сразу увидеть результат jsbin .

Ответ №3:

Вот http://jsfiddle.net/33g7e/6 /`»>код

Черное изображение находится точно над другим изображением.