Question

是否可以在css中使用两个图像作为div背景。那是我有两个图像。一个只是背景颜色和另一个标志。我正在使用这样的代码。

        .header{
        background-attachment: scroll;
        background-clip: border-box;
        background-color: transparent;
        background-image: url("./img/logo.png");
        background-origin: padding-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 400px 90px;
        height: 90px;
        width:100%
        -webkit-border-radius:7px;
        background: url(img/header_background.jpg) repeat-x;

            }

发生的事情是我在后台宣布的最后一张图片。谁能让我知道这个解决方案

Answer 1

使用以逗号分隔的背景属性列表来定义多个背景。此功能仅适用于最新的浏览器。

另请参阅：https://developer.mozilla.org/en/CSS/background-image

额外信息：
在一堆background属性后添加background-会覆盖所有先前定义的背景属性。然而，相反的顺序却不是：

background: red;
background-image: url("transparent-circle.png");
/*Shows the image, with a red color at the transparent sections of the image*/

Answer 2

你需要2个div，

你可以继续使用.header但是里面应该有一个带有header_logo类的div

即

.header{
        background-attachment: scroll;
        background-clip: border-box;
        background-color: transparent;
        background-image: url("./img/logo.png");
        background-origin: padding-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 400px 90px;
        height: 90px;
        width:100%
        -webkit-border-radius:7px;
 }

.header_logo {

        height: 90px;
        width:100px;    
        background: url(img/header_background.jpg) repeat-x;
}

Answer 3

在CSS3中，您可以使用Multiple Backgrounds。但是你可能会遇到IE

的问题

我可以使用两个图像作为html div中的背景

3 个答案: