Question

是因为我的身体背景颜色吗？还是因为我没有设置图像尺寸？还是div容器大小？任何帮助将不胜感激。

<div id="container">
 <div class="buildingimage"></div>
 <h2>Quick Links</h2>
<ul id="QL">
    <li><a href="Free_Consultation.html">Free Consultation</a></li>
    <li><a href="Client_List.html">Client List</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="Open_positions.html">Open Positions</a></li>
    <li><a href="news.html">Latest News</a></li>
</ul>

body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif; text-decoration: none; background-color: #fff;
}   


#container {
position: relative;
}

.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;

}

#QL {
list-style: circle;
}

Answer 1

由于您的div的宽度和高度为零，请尝试添加高度和宽度。

 .buildingimage {
    background-image: url(https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg);
    float: left;
    background-repeat: no-repeat;
    position: absolute;
    margin: .5em;

    background-size:cover;
    height: 400px;
    width: 100%;
    }

body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif; text-decoration: none; background-color: #fff;
}   


#container {
position: relative;
}

.buildingimage {
background-image: url(https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;

background-size:cover;
height: 400px;
width: 100%;
}

#QL {
list-style: circle;
}

<div id="container">
 <div class="buildingimage"></div>
 <h2>Quick Links</h2>
<ul id="QL">
    <li><a href="Free_Consultation.html">Free Consultation</a></li>
    <li><a href="Client_List.html">Client List</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="Open_positions.html">Open Positions</a></li>
    <li><a href="news.html">Latest News</a></li>
</ul>   
</div>

我不确定为什么我的图像无法渲染？

1 个答案: