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

【问题标题】：Problems with a background image to create a shadow in a CSS layout在 CSS 布局中创建阴影的背景图像问题
【发布时间】：2013-07-05 14:12:09
【问题描述】：

我正在学习如何创建从 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 的右侧来创建此阴影：

#container {
    /* 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 103% 0 transparent;
}

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

有人可以帮我解决吗？

Tnx

安德烈亚

【问题讨论】：

标签： html css layout xhtml themes

【解决方案1】：

嗯，我认为您指的是侧边栏和左侧内容之间的阴影没有出现。

你的#container 元素没有创建阴影，尽管它作为重复背景，是因为该元素没有低于#header 元素。由于#container 中的几乎所有元素都是浮动的，它们的高度不会导致父级扩展，因此其背景不会显示在那里。

要解决此问题，您需要使用 clear CSS 属性 - 本教程示例通过 #clearer 元素的样式实现该属性。

所以，添加到您的 CSS 中：

#clearer{
    clear:both;
    visibility:hidden;
}

...这正是教程示例所使用的，您应该会看到一些改进。（虽然这确实揭示了其他几个问题 - 即，您的图像资产如何相互冲突。）

如果这不是您想要的，请随时告诉我，我们很乐意为您提供进一步的帮助。祝你好运！

【讨论】：