Question

作为主题概述，背景div不会显示，我认为你需要定义宽度和高度，但这不起作用，我检查了名称和文件路径，这些似乎都没问题。

<head>
<link rel="stylesheet" type="text/css" href="css/invoicestyle.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="logo"><img src="images/ATT3006209.jpg" /></div>
    <div id="card"><img src="images/ATT3006207.jpg" /><br /><img src="images/ATT3006208.jpg" /></div>
    <div class="clear"></div>
    <div id="tagline"><p>Tagline goes here</p></div>
    </div>

    <div id="bar">
        <div id="left"></div>
        <div id="middle"></div>
        <div id="right"></div>
        <div class="clear"></div>
    </div>

</div>
</body>

body{
background:#FFF;
font-family:Arial;
font-size:12px;
}

.clear{
clear:both;
}
#wrapper{
width:1000px;
margin:auto;
}
#logo{
float:left;
}
#card{
float:right;
}
#card img{
padding-bottom:5px;
}

#bar{overflow: hidden;}
#left{
background: url("images/left.jpg") no-repeat;
width:10px;
height:50px;
float:left;
display: block
}
#middle{
background: url("images/mid.jpg") repeat-x; 
width:980px;
height:50px;
float:left;
display: block
}
#right{
background: url("images/right.jpg") no-repeat;
width:10px;
height:50px;
float:right;
display: block
}

Answer 1

您无法在background-repeat内设置background-image属性。要么自己制作background，要么将repeat内容移动到自己的background-repeat属性中，应该是这样。

Answer 2

尝试添加

#bar{overflow: hidden;}

我不确定.clear的css是否正确，因为您没有粘贴它，可能不是这样。请让我知道问题是否仍然存在。

Answer 3

#bar
{
    width:100%;
    height:100%;
}

现在我在我的项目中使用你的代码。我将此代码添加到我的项目中。

Answer 4

这有帮助吗？

http://jsfiddle.net/9ygJG/

#bar {
background: orange;
width: 100%;
height: 10em;  
}

#left{
width:10px;
height:50px;
float:left;
background-color: black;
background-image: url(images/left.jpg) no-repeat;
}
#middle{
width:980px;
height:50px;
float:left;
background-color: blue;
background-image: url(images/mid.jpg) repeat-x; 

}
#right{
width:10px;
height:50px;
float:right;
background-color: black;
background-image: url(images/right.jpg) no-repeat; 
}

无法获得在div中显示的背景图片？

4 个答案: