【问题标题】:Problems using a background image to create a shadow in a CSS layout使用背景图像在 CSS 布局中创建阴影的问题
【发布时间】:2013-07-04 13:11:08
【问题描述】:

我正在学习如何创建从 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

安德烈亚

【问题讨论】:

  • 嗨,安德里亚!图像阴影应该在哪里?

标签: html css layout xhtml


【解决方案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 属性即可。

【讨论】:

  • Tnx,我不知道这些 CSS3 属性可以用来创建没有背景图像的 shadwo,我会尝试 :-) 但是,与您的解决方案相关的似乎不起作用。我在#container 中更改为 103% 但不起作用,在我看来,在教程示例中,这设置为 100% 而不是你说的 103%
猜你喜欢
  • 2013-07-05
  • 1970-01-01
  • 2012-04-10
  • 2012-09-02
  • 1970-01-01
  • 1970-01-01
  • 2023-01-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多