CSS: Как перенести фоновое изображение на передний план?

Я уже смотрел CSS: How to make background-image above background-color in a list и пробовал атрибут !important, но безуспешно.CSS: Как перенести фоновое изображение на передний план?

У меня есть страница this, где я хотел бы принести желтую обложку книги, которую я использую в качестве фонового изображения перед навигационной панелью ниже.

enter image description here

код, я использую следующее:

.home-link { 
    background: url(http://www.mensch-jinn-dajjal.net/wp-content/uploads/2013/12/Buchtitel.gif) no-repeat !important; 
    background-size: 180px 200px !important; 
    background-position: 400px 80px !important; 
    z-index: 99999 !important; 
}

Любая идея, почему она не приходит на фронт?

Я также попытался присвоить навигатору отрицательный z-индекс без успеха.

источник

2013-12-21 orschiro

z-index не будет работать в этом случае; z-index предназначен для тех элементов, которые сложены друг над другом, то есть они перекрываются сверху и слева, что не в вашем случае. Html работает так, как она должна т.е. расположение потока,

это разметка Outhere на сайте:

<header id="masthead" class="site-header" role="banner"> 
    <a class="home-link" href="...</a> <-- Link containing the image--> 
    <div id="navbar" class="navbar"> <!-- navigation bar --> 
    </div><!-- #navbar --> 
</header>

ясно, ваш якорь и панель навигации расположены один за другим, они оказываются точно так же как что.

Для того чтобы увидеть ваше изображение, необходимо скопировать картинку position:absolute. Я бы рекомендовал создать независимый тег img и сделать его абсолютным положением и разместить его именно там, где вы хотите, с относительным верхним и левым углом, чтобы он настраивался в соответствии с разрешением.

видеть эту простую иллюстрацию г-индекс: jfiddle

в этом, у нас есть четыре float:left, position:absolute подразделения, по-умолчанию, когда нет г-индекс не дано ни одному из них, тот, который присутствовал в последний в потоке, был видимым цветом, но поскольку вы даете более высокий z-индекс кому-либо из них (первый в примере), он становится видимым цветом

источник

2013-12-21 08:10:54

Thanks Manish. Я нашел ваше решение лучшим в этом случае. Добавление отдельного тега '' отлично работает и является хорошим обходным решением проблемы. – orschiro

редактировал прочитанное сообщение

Просто изменить эти свойства, то ваш хорошо идти. так как вы предоставили очень маленький фрагмент кода. было трудно понять и объяснить. но выполните следующие изменения. это даст вам то, что вы хотите. и вы должны сделать некоторые элементы текста повторно прикосновение снова

.site-header { 
    background: url(http://www.mensch-jinn-dajjal.net/wp-  content/uploads/2013/12/header-without-book-1600x230.jpg) no-repeat scroll top; 
    background-size: 1600px auto; 
    z-index: 1; //updated here 
} 

.navbar { 
    background-color: #DD2A0F; 
    margin-bottom: 10px; 
    padding-right: 80px; 
    position: absolute; //updated here 
    top: 200px; //updated here 
    z-index: -2; //updated here 
    } 


.site-header .home-link { 
    color: #141412; 
    display: block; 
    margin: 0 auto; 
    max-width: 1080px; 
    min-height: 280px; //updated here 
    padding: 0 20px; 
    text-decoration: none; 
    width: 100%; 
    }

Снимок здесь.

enter image description here

источник

2013-12-21 08:00:17 Kirk

Почему это свойство является проблемой? Мне нужно это свойство, чтобы позиционировать фоновое изображение, где я хочу (оно находится в свободном пространстве между элементами навигации 'Bewertungen' и' Kontakt') – orschiro

Сообщение Отредактировано, проверьте это – Kirk

@Kirk Как это обновление может привести к желтый логотип infront ?? –

штабелирования порядок элементов в CSS управляется positionz-index собственности и имущества. Просмотрев свой код, у вас нет свойства position, объявленного либо на div .home-link, либо на навигационной панели под ним.

Я бы постарался добавить position: relative в .home-link для начала. Тогда вам, возможно, придется поиграть с позиционированием и z-index навигационной панели.

источник

2013-12-21 08:04:28

Проблема заключается не в том, где вы думаете. Фактически a.home-link действительно находится на передней панели, но не перекрывает навигационную панель. И вы действительно не хотите его, потому что вы больше не могли использовать navbar для навигации, когда кнопки меню расположены по ссылке a.home-link

Для того, чтобы добиться того, что вы любили, вам нужно отделить a.home-link надвое:

есть один a элемент представляет ссылку с текстом
есть второй a элемент представляет обложку книги

Просто общие замечания о вашем стиле css-кодирования:

Использовать !important только в исключительных случаях. !important не должно быть способом аннулирования базовых принципов наследования css. Задумайте структуру вашего документа с учетом стиля, и вам (почти) никогда не понадобится !important. Не используйте !ipmortant часто, потому что (1) вы не можете его переопределить, (2) это приводит к unmaintanable css-коду.
Использовать хорошо выбранные значения z-index: зачем использовать 99999, если 2 уже больше 1? И если вы хотите позже что-то до 99999, вы будете использовать 999999?

источник

2013-12-21 08:07:43

CSS: Как перенести фоновое изображение на передний план?

ответ

Смежные вопросы