透明的PNG / GIF在它后面雕刻出背景图像

Question

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

这是我希望图像从最低到最高的堆叠方式：

1. 背景图块 (JPG)

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

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

   李>

由于某种原因，我照片的透明部分会切掉相框的一部分，所以我没有看到相框，而是直接看到背景图块 (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;
}

Answer 2

您的重置 CSS 选择器将所有元素的背景图像设置为 i/bg.jpg。