我一直在尝试使用css将背景图像添加到div类中。但没有成功。
HTML代码： -
<header id="masthead" class="site-header" role="banner">
<div class="header-shadow"></div>
<hgroup></hgroup>
<nav role="navigation" class="site-navigation main-navigation">
</nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->
CSS： -
.header-shadow{
background-image: url('../images/header-shade.jpg');
}
其他信息：
这是带阴影的图像，我在网站顶部使用它，所以它不能有特定的宽度。
答案 0 :(得分：52)
您需要添加width和height背景图片才能正常显示。
对于实例，
.header-shadow{
background-image: url('../images/header-shade.jpg');
width:xxpx;
height:xxpx;
}
正如您所提到的那样，您将其用作阴影，您可以移除width并添加background-repeat（如果需要，可以垂直或水平）。
对于实例，
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
height:xxpx;
}
希望这有帮助。
PS：xx是虚拟值，您需要将其替换为图像的实际值。
答案 1 :(得分：10)
给出高度和宽度：
.header-shadow{
background-image: url('../images/header-shade.jpg');
height: 10px;
width: 10px;
}
答案 2 :(得分：2)
这是因为.header-shadow为空。
给height。
.header-shadow{
background-image: url('../images/header-shade.jpg');
background-color:red;
height:50px;
}
答案 3 :(得分：1)
添加身高＆amp; .css文件的宽度属性。
答案 4 :(得分：1)
在CSS中使用图像作为正文背景
body {
background-image: url("image.jpg");
}
答案 5 :(得分：1)
您也可以尝试在div部分设置课程;
/**CSS**/
.content {
background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat;
}
.displaybg{
text-align:center;
color:#FFF;
} <div class="content">
<p class="displaybg">This is just a test</p>
</div>
答案 6 :(得分：0)
<html>
<head>
<style type="text/css"><!--
body{
margin:0px; padding:0px;
}
.wrapper{
margin:0px auto;padding:0px;
width:940px;
background-color:#eee;
background-image: url("images/bg.png");
background-repeat:repeat-y;
padding: 0px 25px 4px 25px;
}
.header{
}
.headerIn{
width: 940px;
margin: 0 auto;
font-size: 14px;
}
.headerP1{
width:940px;
background:url("images/lines_tech.png") repeat;
margin: 0px auto;
height:140px;
}
.container{
width: 940px;
margin: 0 auto;
font-size: 14px;
height:auto;
}
.footer{
width:100%;
background:#eee;
}
.footer {
width: 940px;
margin: 0 auto;
font-size: 12px;
font-family: Georgia,"Times New Roman",Times,serif;
/*background: url("images/footer_bg.png") center bottom no-repeat;*/
}
.mainfooter{
width:990px;
background: url("images/footer_bg.png") no-repeat;
margin-bottom:50px;
margin: 0 auto;
}
.footer .footerContiner {
width: 940px;
margin: 0 auto;
font-size: 11px;
}
#tblbdr table, #tblbdr table td {
border-collapse: collapse;
border: solid 1px #cdcdcd;
padding: 5px 5px;
}
#tblbdr table, #tblbdr table td {
border-collapse: collapse;
border: solid 1px #cdcdcd;
padding: 5px 5px;
}
.input {
padding: 5px 5px;
margin: 0px 0px;
border: solid 1px #dedede;
background-color: #f9f9f9;
font-size: 12px;
}
.tbl{margin: 0 auto;
padding-bottom:3px;
background: url("images/tblbtm.png") repeat-x bottom;
}
.tbl1{
background: url("images/tblright.png") repeat-y right;
padding-right:2px;
}
.button{
background:royalblue;
color:#fff;
border:none;
padding: 5px 7px;
cursor:pointer;
}
ul {
list-style: square outside none;
}
ul li{
display: block;
height: auto;
line-height: 29px;
text-decoration: none;
background-color: #f6f6f6;
padding-left: 30px;
font-family: Verdana;
border-bottom: 1px solid #ebebeb;
background-image: url('images/arrowC.png');
background-repeat: no-repeat;
background-position: left -30px;
}
.DivTab1 {
width: 270px;
height: 199px;
}
.DivTab1 a {
background-image: url('images/nav_bg.jpg');
background-position: 0 0;
float: left;
display: block;
width: 85%;
height: 33px;
line-height: 40px;
padding-left: 40px;
color: #000;
}
.DivTab1 a:hover {
background-image: url('images/nav_bg.jpg');
background-position: left 33px;
float: left;
display: block;
width: 85%;
height: 33px;
line-height: 40px;
padding-left: 40px;
}
--></style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="headerIn">
<div class="headerP1">Header</div>
</div>
</div>
<div class="container" id="tblbdr">
<div class="tblt" style="padding:10px;background:#fff; width:500px;margin:0px auto;">
<table border="0" align="center" cellpadding="0" cellspacing="0" width="500px">
<tr><td>Login</td></tr>
<tr><td><input type="text" class="input" /></td></tr>
<tr><td><input type="text" class="input" /></td></tr>
</table>
</div>
<br /><br />
<div class="tbl">
<div class="tbl1">
<table border="0" style="background:#fff;" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="width: 79px">
State<span style="color: #ff0000">*</span></td>
<td style="width: 183px">
<select name="drpOwnerState" onchange="javascript:setTimeout('__doPostBack(\'drpOwnerState\',\'\')', 0)" id="drpOwnerState" class="input" style="width:173px;">
<option value="NA">Select</option>
<option selected="selected" value="AN">ANDAMAN AND NICOBAR ISLANDS</option>
<option value="AP">ANDHRA PRADESH</option>
<option value="AL">ARUNACHAL PRADESH</option>
</select>
</td>
<td style="width: 65px">
Division<span style="color: #ff0000"></span></td>
<td style="width: 187px">
<select name="drpOwnerDivision" onchange="javascript:setTimeout('__doPostBack(\'drpOwnerDivision\',\'\')', 0)" id="drpOwnerDivision" disabled="disabled" class="input" style="width:173px;">
<option selected="selected" value="NA">Select</option>
</select>
</td>
<td style="width: 56px">
District<span style="color: #ff0000"></span></td>
<td colspan="3">
<select name="drpOwnerDistrict" onchange="javascript:setTimeout('__doPostBack(\'drpOwnerDistrict\',\'\')', 0)" id="drpOwnerDistrict" disabled="disabled" class="input" style="width:173px;">
<option selected="selected" value="NA">Select</option>
</select></td>
</tr>
<tr>
<td colspan="3">
Type any detail about your nearest KIOSK:</td>
<td colspan="5">
<input name="txtSearch" type="text" maxlength="100" id="txtSearch" class="input" style="width:182px;"></td>
</tr>
<tr>
<td align="center" colspan="8" style="height: 23px">
<input type="submit" name="btnsearch" value="Search" onclick="return ListValidation();" id="btnsearch">
<input type="submit" class="button" name="lblExport" value="Export To Excel" id="lblExport"></td>
</tr>
</tbody></table>
</div></div>
<br /><br />
<div class="DivTab1" style="z-index: 750;">
<a href="/Portal/CitizenHome.aspx?servtypeid=1">Applications</a><a href="/Portal/CitizenHome.aspx?servtypeid=2">
Bill Payments</a> <a href="/Portal/CitizenHome.aspx?servtypeid=3">Counseling</a>
<a href="/Portal/CitizenHome.aspx?servtypeid=4">Assessment</a> <a href="/Portal/CitizenHome.aspx?servtypeid=5">
Religious</a> <a href="/Portal/CitizenHome.aspx?servtypeid=6">Reservation</a>
<a href="/Portal/CitizenHome.aspx?servtypeid=7">Universities</a>
</div>
<br /><br />
<div>
<ul>
<li><spn>This is testing code which may be more or less.</span></li>
<li>This is testing code which may be more or less. This is testing code which may be more or less.This is testing code which may be more or less. This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
<li>This is testing code which may be more or less.</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footerContiner">Footer</div>
</div>
</div>
<div class="mainfooter"> </div>
</body>
</html>
答案 7 :(得分：0)
.content {
background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat;
}
.displaybg {
text-align:center;
color:#FFF;
}