наложение фоновых изображений не отображается - PullRequest
Новая
       28

наложение фоновых изображений не отображается

0 голосов
/ 17 июня 2011

Я пытаюсь создать округленные изображения (в этой ситуации фиксированная ширина, поэтому я просто хочу использовать оверлей png), но наложение углов, похоже, не отображается.

Разметкавыглядит следующим образом: 

 <div class="rounded roundTop">
     <div class="rounded roundBottom">
         <img />
     </div> 
 </div>



.rounded {
    position: relative;
    z-index: 99;
}

.roundTop{    
    background: transparent url('../@gui/round-img-top-155.png') top left no-repeat; 
}

.roundBottom{
    background: transparent url('../@gui/round-img-bottom-155.png') bottom left no-repeat;   
}

img {  
    width: 155px;
    padding-right: 12px;
    position: relative;
    z-index: 1;

. Заземленные div, кажется, находятся в правильном месте, но их фоны не отображаются, и я не уверен, почему!

Здесьявляется jsfiddle

Я пытаюсь назначить сплошной фоновый цвет контейнерам div, и они идут под изображением, несмотря на их z-индекс.

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

Ответы [ 3 ]

1 голос
/ 17 июня 2011

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

0 голосов
/ 17 июня 2011

Это исправит: 

.roundBottom{
    padding: 18px 0px;
    background: transparent url('http://ctrlshiftweb.com/round-img-bottom-155.png') bottom left no-repeat;
}

Необходимо учитывать высоту изображения. : D

0 голосов
/ 17 июня 2011

Полагаю, они вообще не появляются? Рискну догадаться, это из-за твоего URL Я не думаю, что «@» является допустимым символом для использования в именах файлов (если это так, это не очень хорошая практика).

Хороший способ убедиться, что браузер находит файл, - это открыть инструменты разработчика браузера (для Firefox вам нужно установить Firebug; остальные встроены) и посмотреть на представление CSS , Вы должны быть в состоянии щелкнуть или навести курсор на URL-адрес и посмотреть, загружает ли он предварительный просмотр (я знаю, что это работает в Firebug, я думаю, что это работает в других, если нет, вы должны быть в состоянии определить, загрузил ли он файл в представлении загрузки).

Помимо этого, действующая ссылка или jsfiddle может помочь.

...