我正在研究如何创建从Photoshop到HTML + CSS代码的固定表格CSS布局的教程。
这是教程中提出的最后一个例子（最后看起来如何）：
http://www.html.it/articoli/1688/template/11-css.html
这是我之前模板的个人版本：http://onofri.org/example/WebTemplate/
你怎么能看到我在Firefox中遇到一些问题，左栏的左侧阴影（其他浏览器我有其他问题）
在示例模板中，我通过将 bgpage.gif immage设置为#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
安德烈
答案 0 :(得分：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属性。