Question

我有一个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 &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>

Answer 1

有几种方法可以解决这个问题。

您可以在css中为背景尺寸：属性指定水平和垂直值。尝试使用这些值。

您还可以尝试自动和长度等属性值。

这是一些代码。在这里，我将宽度设置为自动，将高度设置为 100％，以便保持纵横比，并且背景会根据div的大小自动缩放。看看吧。

function MyProxyFunction() {
    console.log(">>>>>>>>>>>>>>>>>>>> constructor");
    return new Proxy(this, {
        get: function(target, prop) {
            if (target[prop] === undefined) {
                return function()  {
                    console.log('an otherwise undefined function!!');
                };
            }
            else {
                return target[prop];
            }
        }
    });
}
var myObj = new MyProxyFunction();
myObj.foo();
console.log('constructor:', myObj.constructor.name);
console.log('Is instance of MyProxyFunction?: ', myObj instanceof MyProxyFunction);

#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;
}

Answer 2

在您的css文件中，网址图片必须用双引号括起来。像这样：

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

div的背景图象不会出现

2 个答案: