css - css div 标签中的背景图片

Question

这让我抓狂了好几个小时。请有人向我解释为什么根本没有图像出现。我正在严格使用 XHTML 1.0。非常感谢。

CSS:

#flags {
    position: relative;
    background-image:url(example.png);
    background-repeat: no-repeat;
    float: right;
    margin-left: 18px;
    width:400px;
    height:400px;
} 

HTML:

<div id="flags">
   <p>text
     <br />
       text
     <br/>
   </p>

   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
</div> 

Answer 1

当您使用 background-image 调用图像时，请确保定义了 width 和 height 属性。

这是你的 CSS 代码，我添加了 height 和 width

#flags {
position: relative;
background-image:url(http://lorempixel.com/200/200);
background-repeat: no-repeat;
background-position: bottom right;
float: left;
width:100%; //width:200px; /* added the width 100% is good for responsive */ 
height:auto; //height:200px; /* added the height For Responsive*/ 
}

这是工作演示。 http://jsbin.com/lonarezu/1/edit