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

Question

Я пытаюсь создать округленные изображения (фиксированная ширина в этой ситуации, поэтому я просто хочу использовать наложение 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; 

В .rounded дивы, как представляется, в нужном месте, но их происхождения не видны, и я не уверен, почему!

Вот jsfiddle

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

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

Answer 1

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

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

Помимо этого, живая ссылка или jsfiddle помогут.

Answer 2

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

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

Вы должны принять во внимание высоту изображения. : D

Answer 3

Вам необходимо удалить z-index из элементов контейнера и установить отрицательный z-index на картинке, see here.