使用背景图像在 CSS 布局中创建阴影的问题

Question

我正在学习如何创建从 Photoshop 到 HTML+CSS 代码的固定表格 CSS 布局的教程。

这是本教程中提出的最后一个示例（它在最后的样子）：

http://www.html.it/articoli/1688/template/11-css.html

这是我之前模板的个人版本：http://onofri.org/example/WebTemplate/

你怎么能看到我在 Firefox 中左栏的左阴影有问题（在其他浏览器中我有其他问题）

在示例模板中，我通过将 bgpage.gif 图像设置为 #container div 的背景并将其放在此 div 的右侧来创建此阴影

容器{

/* /* consente di posizionare un elemento al centro del suo contenitore (non tutti i browser la supportano) */
margin: 0 auto;
width: 770px;   /* Imposto la larghezza */
background: url(../images/bgpage.gif) repeat-y scroll 100% 0 transparent;

}

为什么在本教程提出的示例中运行良好，而在我的例子中却不行？

有人可以帮我解决吗？

Tnx

安德烈亚

Answer 1

您的页面出现问题是因为两个图像重叠。更准确地说：

body 中的bg4.jpg 与#container 中的bgnarrowcolumn.jpg 重叠。

要修复它，只需添加以下 CSS 规则：

background: url(../images/bgpage.gif) repeat-y scroll 103% 0 transparent;

将 100% 更改为 103%。

正如我所见，在教程页面中都使用了这种方法（我的意思是，使用图像制作背景）。我说这种做网站，做网页展示的方式已经过时了，难度很大；如你所见。此外，您将可以访问服务器，因为需要很多图像（不好的做法）。

为什么需要使用图片？在我看来，最好的方法是使用 CSS3：

这是一个带有阴影的示例的 Jsfiddle：DEMO

如果要制作渐变背景，只需添加gradient 属性即可。