这让我抓狂了好几个小时。请有人向我解释为什么根本没有图像出现。我正在严格使用 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>
最佳答案
当您使用 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
关于css - css div 标签中的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22189337/