我有一个要用图像填充的 div。不过它不会显示。
这是 html:
<div id=services>
<p1>Services</p1>
<div id="test"></div>
</div>
这是 CSS:
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
这是完整的代码:
<!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 |</a></li>
<li><a href="#">fees & insurance |</a></li>
<li><a href="#">hours & location |</a></li>
<li><a href="pages/services.html">services |</a></li>
<li><a href="#">about |</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>
最佳答案
有几种方法可以解决这个问题。
您可以在 css 中为 background size: 属性指定horizontal 和vertical 值。尝试使用这些值。
您还可以尝试使用 auto 和 length 等属性值。
这是一些代码。在这里，我将宽度设置为 auto，将高度设置为 100%，这样纵横比就会保持不变，背景会随着 div 的大小自动缩放。检查一下。
#test {
background-image: url(https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
height:200px;
width:200px;
background-color: red;
}<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>关于html - div 的背景图像不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45393683/