背景图像不会显示在<div>元素中 - CSS / HTML

时间:2017-05-23 04:49:23

标签: html css

screenshot of the directory structure 我创建了一个<div>元素,并且我将在css元素下使用<div>元素。

#girls {
    background-image: url("girl.gif");
}

以下是我的HTML <div>元素(此元素包含在index.html页面中):

        <div id="girls">
            <p>
            <b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
            experience every time you visit. Whether you're just stopping by to check in on email over an elixir, 
            or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
            detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
        </p>
        </div>

但是当我加载索引页面时,背景图像(girl.gif)并没有显示出来。有人可以帮我这个吗?

2 个答案:

答案 0 :(得分:3)

试试这个:

#girls {
    background-image: url("../girl.gif");
}

我猜测css位于stylesheet个文件夹中,这就是为什么你需要升级才能访问girl.gif,因此使用../

答案 1 :(得分:2)

<!DOCTYPE html>
<html>
<head>
    <title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
    background-image: url('demo.gif');
    height: 200px;
    width: 50%;
}
</style>
<body>
    <div id="girls">Sample Text
    </div>
</body>
</html>

如果您使用外部CSS,则更改图像的目录路径&amp;再试一次。 其他Inline Stlying请使用示例代码 图像链接 https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif