Question

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

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

背景图块（JPG）
倾斜相框（PNG）//显然因为它是倾斜的，所以它需要在两侧透明以让背景图块JPG显示
倾斜的照片（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所有元素。

雕刻在它后的背景图象的透明PNG / GIF

2 个答案: