HTML 中的背景颜色不适用于整个页面答案

【问题标题】：Background color in HTML is not applied to the whole pageHTML 中的背景颜色不适用于整个页面
【发布时间】：2021-04-27 02:36:10
【问题描述】：

我将身体的背景设为灰色。我在身体部位添加了一张图片，但图片的背面是白色的。但是h4贴纸的背面是灰色的。为什么图片的背面不是灰色的。如果我手动给地下室像素，但我希望它自动完成，就会发生这种情况。

HTML 代码

<body class="body" style="background-color: #212325" > 
    
    <h4 class="h4"> <i style="color: yellow;" class="bi bi-upload"></i> Dikkat Çeken Yeni Diziler</h4>

    <div class="container">
      <div class="box">
      <a href="">  <img style="width: 200px; height: 300px;" src="assets/images/thePianist.jpg" alt="Shadow and Bone" ></a>
      </div>  
    </div>
   
     
</body>

CSS 代码

.h4{
    color: rgb(214, 214, 214);
    padding-bottom: 15px;
}

.body{
    padding-left: 15px;
    padding-top: 10px;
}

.container {
    width: 80%;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    float: left;
}

.box {
    width: 150px;
    height: 150px;
    background: gray;
    margin: 0px 14px;
    transition: 0.5s;
}

.box img {border-radius: 0px;}

.box:hover {
    transform: scale(1.1);
    background: black;
    z-index: 2;
}

看起来像这样：

unwanted image

我希望它看起来像这样：

wanted

【问题讨论】：

如果你愿意，请给我一个链接来检查。
如果您提供链接，我可以提供更多帮助。我可以查看源代码并检查元素以帮助我了解哪个 div 显示什么。
你能解释一下“如果我手动给地下室 px 会发生什么”是什么意思吗？谢谢。

标签： html css web

【解决方案1】：

您已将样式应用于<h4> 标记。但是，您没有将任何东西作为毯子应用到 <body> 标记或将应用灰色的容器类。如果您希望 <h4> 标记中的相同颜色到您的容器类，然后尝试将相同的颜色代码行从您的 <h4> CSS 添加到您的容器 CSS，这将使容器 CSS 看起来像这样：

.container {
    color: rgb(214, 214, 214);
    width: 80%;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    float: left;
}

这应该可以解决您的问题，但如果没有，可能是我忽略了一个错误。无论哪种方式，请告诉我，祝您有美好的一天。

【讨论】：

有趣的是，当我在 style.css 部分中为 body 赋予背景颜色时，它会自动工作。我不需要给它一个像素。当我给容器一个背景颜色时，只有容器内部变成了白色，但是我上面写的方式是固定的，谢谢

【解决方案2】：

据我所知，我只能建议此更改，希望它有效。

.container {
    width: 80%;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    float: left;
}

到

.container {
    width: 80%;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    float: left;
    background: rgb(214, 214, 214);
}

容器是包含显示为电影封面的盒子 div 的 div。空白区域将是容器。

如果这不起作用，请尝试将每个 div 的背景逐一更改以查看它是哪个 div。

【讨论】：

有趣的是，当我在 style.css 部分中为 body 赋予背景颜色时，它会自动工作。我不需要给它一个像素。当我给容器一个背景颜色时，只有容器内部变成了白色，但是我上面写的方式是固定的，谢谢