Прозрачный PNG/GIF вырезая фоновое изображение позади него

Question

Я проектирование сайта и у меня вопросы прозрачности во всех браузерах я тестировал в.

Вот как я хочу, чтобы мои изображения в стек, с самым низким г-индекс к высшему:

1. плитки фона (JPG)

2. наклонена фото рамка (PNG) // очевидно, потому что это наклоняется, то нужно быть прозрачным по бокам, чтобы позволить фон плитка JPG показать через

3. наклонены фото (PNG) // это сидит внутри фоторамки, а края этого также прозрачны, который должен позволить дисплей фоторамки (визуально) вокруг фотографии

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

Я загрузил пример того, что я делаю, чтобы http://jezenthomas.co.uk/temp

В моем примере я использовал GIFs, хотя я испытываю такую ​​же проблему с в формате PNG.

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

Answer 1

Ваш <span> элемент имеет тот же фон, как ваш черепичные фоновое изображение :)

Ваш CSS:

html, body, div, [[[span]]]], applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, 
img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, 
tr, th, td { 
    background-image: url("i/bg.jpg"); <---------- 
    border: 0 none; 
    font-family: arial,serif; 
    font-size: 100%; 
    font-style: inherit; 
    font-weight: inherit; 
    margin: 0; 
    outline: 0 none; 
    padding: 0; 
    vertical-align: baseline; 
} 

Answer 2

Ваш селектор сброса CSS устанавливает фоновое изображение i/bg.jpg по всем элементам.