Html div的背景图像不会显示_Html_Css_Image

Html div的背景图像不会显示

html css image

Html div的背景图像不会显示,html,css,image,Html,Css,Image,我有一个div，我想用图像填充它。但它不会出现以下是html： <div id=services> <p1>Services</p1> <div id="test"></div> </div> 这是完整的代码： <!DOCTYPE html> <html> <head> <title>Title</title> <meta charset

我有一个div，我想用图像填充它。但它不会出现

以下是html：

<div id=services> 
    <p1>Services</p1>
    <div id="test"></div>
</div>

这是完整的代码：

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>

  html { 
    font-family: "Open Sans";
    font-size: 24px;
    font-style: light;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
}

body { 
 background:  linear-gradient(#fff 30%, #CCFFFF );
 margin-top:10px ;
 margin-right:75px;
 margin-left:75px;
}
#container { 
 width:1300px; 
 margin:0 auto; 
 background:#iff; 
}

#header { 
 width:100%; 
 height:170px; 
 background:#Fff;
 }

#logo { 
 float:left; 
 width:400px; 
 height:40px; 
 margin:30px; 
 background:#Fff;
 color: #000;
 font-size: 40px;
 line-height:38px; 
}
span1 { font-size: 30px;
        line-height: 18px;


}
#navbar { 
 height:40px; 
 clear:both; 
 background: #Fff;
}
#navbar ul { 
 margin:10px; 
 padding:1px; 
 list-style-type:none;
 line-height: 40px; 
}
#navbar ul li { 
 padding:px; 
 float:right ; 
 margin-top:20px;
}
#navbar ul li a { 
 font-size:24px; 
 float:right ; 
 float:right ;
 padding:0 0 0 20px; 
 display:block;
 text-decoration:none;
 font-weight:100;
 color:#000;
}

#services {
  height:450px;
 background:#f9fbfb;
 text-align:center;
 font-weight:100;
 font-size:35px;
 padding:50px;
}

p {
 font-size:25px;
 font-weight: 200;
 margin-right:75px;
 margin-left:90px;
 line-height:40px;
 margin-top:50px;
}
#test {
 background-image: url(pics/chart.png);
 background-repeat: no-repeat;
 background-size:100%;
 height:200px; 
 width:200px;
 margin:auto;
 position:absolute;
}

h4 {
 text-align:center;
 margin: 60px;
 font-weight:;
 float:center;
}

#end {
 height:200px;
}

  </style>
</head>
<body>
<!-- container -->
 <div id="container">
 <!--  header -->
 <div id="header">
  <div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
  <div id="navbar">
   <ul>
    <li><a href="">contact </a></li>
    <li><a href="#">gallery &nbsp;|</a></li>
    <li><a href="#">fees & insurance &nbsp;|</a></li>
   <li><a href="#">hours & location&nbsp; |</a></li>
    <li><a href="pages/services.html">services &nbsp;|</a></li>
    <li><a href="#">about &nbsp; |</a></li>
   </ul>
   </div>
  </div>
  <!-- content area -->
  <div id="content_area">
 <div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
</div>
 <div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today 
1-805-563-0167 
</p>
</h4>
</div>
 </div><!-- end container -->
</body>
</html>


标题
网站
html{
字体系列：“开放式SAN”；
字体大小：24px；
字体风格：浅色；
字体变体：正常；
字号：500；
线高：26.4px；
}
正文{
背景：线性梯度（#fff 30%，#CCFFFF）；
边缘顶部：10px；
右边距：75px；
左边距：75px；
}
#容器{
宽度：1300px；
保证金：0自动；
背景：#iff；
}
#标题{
宽度：100%；
高度：170px；
背景：#Fff；
}
#标志{
浮动：左；
宽度：400px；
高度：40px；
利润率：30像素；
背景：#Fff；
颜色：#000；
字体大小：40px；
线高：38px；
}
span1{字体大小：30px；
线高：18px；
}
#导航条{
高度：40px；
明确：两者皆有；
背景：#Fff；
}
#纳瓦尔{
利润率：10px；
填充：1px；
列表样式类型：无；
线高：40px；
}
#navbar ul li{
填充物：px；
浮动：对；
边缘顶部：20px；
}
#navbar ul li a{
字体大小：24px；
浮动：对；
浮动：对；
填充：0 20px；
显示：块；
文字装饰：无；
字号：100；
颜色：#000；
}
#服务{
高度：450px；
背景#f9fbfb；
文本对齐：居中；
字号：100；
字体大小：35px；
填充：50px；
}
p{
字体大小：25px；
字号：200；
右边距：75px；
左边距：90像素；
线高：40px；
边缘顶部：50px；
}
#试验{
背景图片：url（pics/chart.png）；
背景重复：无重复；
背景大小：100%；
高度：200px；
宽度：200px；
保证金：自动；
位置：绝对位置；
}
h4{
文本对齐：居中；
利润率：60像素；
字号：；
浮动：中心；
}
#结束{
高度：200px；
}
詹姆斯·布鲁尔，圣巴巴拉医学博士，儿科医生








服务
巴斯街2421号A套房

今天预约
1-805-563-0167

在css文件中，url图像必须用双引号括起来。像这样：

#test {
  background-image: url("pics/chart.png"); /* <-- */
  background-repeat: no-repeat;
  background-size:100%;
  height:200px; 
  width:200px;
  margin:auto;
  position:absolute;
}

#测试{
背景图片：url（“pics/chart.png”）；/*有几种方法可以解决这个问题
您可以在css中为背景大小：属性指定水平和垂直值。尝试使用这些值
您还可以尝试属性值，如auto和length
这里有一些代码。我已经将宽度设置为自动，将高度设置为100%，以便保持纵横比，并且背景会随着div的大小自动缩放。请查看

#测试{
背景图片：url(https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg);
背景重复：无重复；
背景尺寸：自动100%；
高度：200px；
宽度：200px；
背景色：红色；
}
服务
这是错误的，伙计！我建议大家忽略w3schools.com这个东西，使用更可靠的源代码，如或本身。引号类型不重要。无引号是可选的：是的，btzr，对不起，我错了。谢谢你提交它。@Natalie是否忘记中的双引号也是可选的？你的代码看起来不错，检查你的图像源代码
#test {
  background-image: url("pics/chart.png"); /* <-- */
  background-repeat: no-repeat;
  background-size:100%;
  height:200px; 
  width:200px;
  margin:auto;
  position:absolute;
}