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

Question

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

以下是我希望图像的堆叠方式（从最低 z-index 到最高）：

1. 背景图块 (JPG)

2. 倾斜相框 (PNG) // 显然，因为这是倾斜的，所以侧面需要透明，才能让背景图块 JPG 通过

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

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

我已将我所做的示例上传到 http://jezenthomas.co.uk/temp

在我的示例中，我使用了 GIF，但我在使用 PNG 时遇到了同样的问题。

当问题解决后，我会将其从我的网络空间中删除，所以我希望我已经为可能遇到同样问题的其他人提供了足够彻底的解释。

Answer 1

您的 元素与平铺背景图像具有相同的背景:)

您的 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。