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

Answer 2

在单引号中试用网址

.test{
    width:100%;
    height:415px;
    background-image:url('http://static.fkids.ru/photo/2011/07/2380/Diana-Pentovich5461568.jpg');
    background-repeat:no-repeat;
    }

WORKING DEMO

Answer 3

试试这个

#flags {
position: relative;
background-image:url("example.png");
background-repeat: no-repeat;
background-position: bottom right;
float: right;
}

Answer 4

尝试在图片网址周围加上双引号

background-image:url("https://example.png");

Answer 5

问题是你的div元素浮动时没有为#flags div设置任何维度。因此，您需要设置#flag div的高度和宽度，或者为其父级提供css属性overflow:hidden，如下所示。然后它将完美地工作。

<强>代码：

<div style="overflow: hidden">

    <div id="flags">
        <p>text</p>
        <ul>
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </div>

</div>

希望这将是你的答案。

DEMO

Answer 6

问题在于你的图像地址......当我把自己的图像放在

中时它会起作用

    #flags {
    position: relative;
    background-image:url('http://th00.deviantart.net/fs71/PRE/i/2012/193/2/9/agua_png_by_eross_666-d56zr6u.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    float: right;
    }

http://jsfiddle.net/Kq48W/1/

Answer 7

我确定您的图片路径或扩展程序不正确。检查图像扩展名并将图像放在html文件的同一文件夹中。

css div标签中的背景图像

7 个答案: