Question

这是我的HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Will Treston - CPD Showcase</title>
    <meta name="author" content="name">
    <meta name="description" content="description here">
    <meta name="keywords" content="keywords,here">
    <link rel="stylesheet" href="index.css" type="text/css">
  </head>
  <body>
  <div id="content" class="content">
    <div id="profile_pic" class="profile_pic">
    </div>
    <div id="overview">
    </div>
    <div id="buttons">

    </div>
  </div>
  </body>
</html>

这是我当前正在使用的CSS：

body {
    min-height: 100%;
    width: 100%;
    /* taken from https://css-tricks.com/perfect-full-page-background-image/ */
    background: url("./images/index_background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* end */
}
.content {
    min-height: 100%;
    padding: 10%, 5%, 10%, 5%;
    text-align: center;
    display: inline-block;
}
.profile_pic {
    height: 20%;
    width: 20%;
    background-image: url("./images/profile_pic.jpg");
}

当前，主体类图像正按预期显示，但是profile_pic类中的图像却未显示。图片名称正确，链接正确100％。

任何帮助和建议都会有所帮助。

Answer 1

我认为您的问题出在您的.content和.profile_pic的CSS声明中-因为您没有在height上设置.content，所以您没有任何选择height调用.profile_pic以引用height: 20%。

以下是一些经过修改的CSS：

body {
    min-height: 100vh;
    height: 100vh; //using view height (vh) units makes it so it's always X% of the visible height
}
.content {
    height: 100%;
    width: 100%; //this works because it's direct parent, 'body', has a height. Therefore, this height is recognized as (100% of 100vh, or 100vh).
    padding: 10% 5% 10% 5%;
    text-align: center;
    display: inline-block;
}
.profile_pic {
    height: 20%;
    display: inline-block;
    width: 20%;
    background-image: url("./images/profile_pic.jpg");
}

您不需要使用vh单位，但是这里的问题是您的.profile_pic是高度0的20％（因为.content是直接父级，所以没有没有定义高度）。

此外，请注意，您对padding的{{1}}调用是不正确的-您不需要逗号。

不显示CSS的图片

1 个答案: