Css 透明PNG/GIF在其后面雕刻出背景图像

我正在设计一个网站，在我测试过的所有浏览器中都存在透明度问题

以下是我希望我的图像如何堆叠，从最低的z索引到最高的z索引：

背景平铺（JPG）

倾斜相框（PNG）//显然，因为它是倾斜的，所以它的侧面需要透明，以便背景平铺JPG显示出来

倾斜照片（PNG）//它位于相框内，并且它的边缘也是透明的，这样可以让相框（视觉上）显示在照片周围

出于某种原因，我的照片的透明部分雕刻出了相框的一部分，因此，我看到的不是相框，而是背景瓷砖（JPG）。我宁愿将照片和相框分开，因为我打算实现一个脚本，在页面刷新时随机显示在相框中的照片

我上传了一个我正在做什么的例子

在我的例子中，我使用了GIF，尽管我在PNG上遇到了同样的问题

当问题解决后，我会将其从我的Web空间中删除，因此我希望我已经对可能遇到相同问题的其他人进行了充分的解释。

您的

元素具有与平铺背景图像相同的背景：）

您的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;
}

html，body，div，[[[span]]]，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，
blockquote、pre、a、缩写、首字母缩写、地址、大、引用、代码、del、dfn、字体、，
img、ins、kbd、q、s、samp、small、strike、sub、sup、tt、var、dl、dt、dd、ol、，
ul、li、字段集、表单、标签、图例、表格、标题、tbody、tfoot、thead、，
tr，th，td{
背景图像：url（“i/bg.jpg”）；重置CSS选择器将所有元素上的背景图像设置为
i/bg.jpg
。
可能最近的PNG不知道如何处理多个背景图像，而只处理第一个解析的背景图像。这可能吗？我相信计算机应该比这更智能！：（啊哈哇。我相信每个人都有过这样的掌心时刻，对吧？谢谢大家！我已经有很多了。很高兴能帮上忙：）