Question

我正在创建单个页面应用程序，但我的#mainPicture不会加载到它假设的div中。这是我在 index.html ：

中调用的地方

<body>

<div id="mainPicture">
    <div class="picture">
        <div id="headerTitle">Places I've Been</div>
        <div id="headerSubtext">A Blog About My Travels</div>
    </div>
</div>

这是我链接样式表的代码：

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/theme.css') }}">

这是我在 theme.css 中的CSS：

#mainPicture
{
    width:670px;
    height:497px;
    background-color:#FFFFFF;
}

#mainPicture.picture
{
    position:relative;
    width:650px;
    height:487px;
    top:10px;
    background-image:url(hudson1.jpg);
    background-repeat:no-repeat;
    margin-left:10px;
}

它只是显示为图片大小的空白区域。我正在使用CMDER来运行我的网页。图像hudson1.jpg与theme.css位于同一个文件夹中，但它不会在div中显示出来。

任何帮助都会很棒。

Answer 1

您的选择器不正确。

#mainPicture.picture

正在寻找具有id mainPicture和类图片的元素。你应该使用：

#mainPicture > .picture

这将选择一个具有图片类的元素，该图片是id为mainPicture的元素的子元素。

使用Flask时，图片不会加载到div中

1 个答案: