0

如果以下代码或我的问题有任何错误,请见谅,我对代码了解不多,但正在学习:)。对不起,链接中的空格和缺少这些东西 - < - 真的很难发布代码:)

在我的网站 http:// second to nature .co.uk/en/ 上,我正在尝试用常春藤在网站的两侧创建背景图像。它是一个prestashop网站。

我确实设法使用以下 css 代码实现了这一点,但是它在 ie 6-8 中不起作用——因为这些浏览器不支持 css3。

background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;

因此,经过一番研究,我尝试用两个 div 创建想要的效果:

<div id="container">
  <div id="inner-container">
  </div>
</div>

然后使用下面的 css 来实现它。

如您所见,如果您访问该站点,左侧图像显示正确,但右侧未显示。

#container {
    background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 130px;
    height: 1000px;
}
    #inner-container {
    background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 130px;
    height: 1000px;
}

谁能看到我哪里出错或有修复?帮助将不胜感激。

非常感谢

4

2 回答 2

0

您的 CSS 中有错字:

url(http://secondtonature.co.uk/img/backgroundright.jpg))

URL 的末尾有一个双 )),应该只有一个。

但是......你的 HTML 都搞砸了,有更好的方法来做到这一点。首先,您的元素中有一大堆元标记和其他资产链接body,而它们都应该在head.

一个更好的方法是在你的内容周围包裹两个 div(默认情况下它们是 100% 宽度)并将 bg 图像放在每个上面。

于 2013-05-03T14:22:10.110 回答
0

您可以使用 Modernizr,然后使用 CSS3 边框图像。然后边框图像会在 IE6、7 和 8 中显示。

遗憾的是,您有 IE6 用户需要担心。这是一个糟糕、有缺陷和不安全的浏览器。

http://modernizr.com/

于 2013-05-03T14:42:15.657 回答