css - 透明PNG/GIF雕刻出背后的背景图

Question

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

下面是我希望图像从最低 z-index 到最高的堆叠方式:

1. 背景图 block (JPG)

2. 倾斜的相框 (PNG)//很明显，因为这是倾斜的，所以它的侧面需要透明才能让背景图 block JPG 显示出来

3. tilted photo (PNG)//这个位于相框内部，边缘也是透明的，应该让相框(视觉上)显示在照片周围

   <

由于某种原因，我的照片的透明部分切掉了相框的一部分，所以我没有看到相框，而是直接看到背景图 block (JPG)。我宁愿将照片和相框分开，因为我打算实现一个脚本，该脚本会在页面刷新时随机显示相框中的照片。

我已将我正在做的事情的示例上传到 http://jezenthomas.co.uk/temp

在我的示例中，我使用了 GIF，但我在使用 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;
}