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

Question

我正在研究如何创建固定表格的 CSS 布局教程，从 Photoshop 到 HTML+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;

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

有人可以帮我解决吗？

谢谢

安德里亚

Answer 1

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

bg4.jpg在body与 bgnarrowcolumn.jpg 重叠在#container .

要修复它，只需添加这些 CSS 规则:

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

将 100% 更改为 103%。

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

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

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

如果你想制作渐变背景，只需添加 gradient属性(property)。