1

我有两个背景图像，我想将它们放在包装器 div 的左侧和右侧。我正在使用 CSS3 background-image 属性来执行此操作，但它不起作用。任何人都可以理解为什么这在任何浏览器中都不起作用。我还想知道，一旦我在现代浏览器上使用它，它会在像 IE 7 这样的旧浏览器上运行吗？

这是我想要完成的视觉效果，我已经有了导航（绿色横幅），所以我需要把棘手的红色横幅放在上面并圈出背景。

我认为将红色横幅的边缘与圆形背景一起切开并应用下面的代码会起作用，但这并不是说我需要边保持与边齐平。

在此处输入图像描述

body{ 
    background-color:#e5e5e5; 
    background-image: url("../img/background_left.png"),url("../img/background_right.png");
    background-position: right top, left top; 
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    }
4

1 回答 1

1

为您添加高度<body>，它会起作用 -演示

html, body {
    height: 100%;
}

body{ 
    background-attachment: fixed, fixed;
    background-color:      #e5e5e5; 
    background-image:      url(http://lorempixel.com/300/200), url(http://lorempixel.com/200/300);
    background-position:   right top, left top; 
    background-repeat:     no-repeat, no-repeat;
} ​

但它不适用于较旧的 IE-s -支持多种背景

于 2012-10-13T01:03:33.110 回答