Question

我有两个背景图片，我想放在我的包装div的左侧和右侧。我使用CSS3 background-image属性来执行此操作，但它无法正常工作。任何人都可以理解为什么这不适用于任何浏览器。我还想知道，一旦我在现代浏览器上工作，它是否适用于IE 7等旧版浏览器？

这是我正在努力实现的视觉效果，我已经有了导航（绿色横幅），所以我需要把棘手的红色横幅放在圈子背景上。

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

enter image description here

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;
    }

Answer 1

为<body>添加高度，它将起作用 - DEMO

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 - multiple backgrounds support

CSS3多个背景 - 图像不起作用

1 个答案: