时间戳

首页 > 解决方案 > 带有 CSS 的图像不显示

html - 带有 CSS 的图像不显示

问题描述

这是我的 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");
}

目前，body 类图像按原样显示，但 profile_pic 类中的图像不是。图像命名正确，链接 100% 正确。

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

标签： html

解决方案

我认为您的问题在于您的 CSS 声明，.content并且.profile_pic- 因为您没有设置 a heighton ，所以没有任何内容.content可供您参考.height.profile_picheight: 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呼叫.content不正确-您不需要逗号。

推荐阅读