HTML 中的背景顏色不適用於整個頁面

Question

我將身體的背景設為灰色。 我在身體部位添加了一張圖片，但圖片的背面是白色的。 但是h4貼紙的背面是灰色的。 為什么圖片的背面不是灰色的。如果我手動給地下室 px 但我希望它自動完成，就會發生這種情況。

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;
}

它看起來像這樣：

不需要的圖像

我希望它看起來像這樣：

通緝

Answer 1

您已將樣式應用於<h4>標記。 但是，您沒有將任何東西作為毯子應用到<body>標記或容器 class 上，該容器將對其應用灰色。 If you want the same color from the <h4> tag to your container class, then try adding the same line of code for color from your <h4> CSS to your container CSS, which would make the container CSS look like this:

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

這應該可以解決您的問題，但如果沒有，可能是我忽略了一個錯誤。 不管怎樣，讓我知道，祝你有美好的一天。

Answer 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。

HTML 中的背景顏色不適用於整個頁面

問題描述

2 個解決方案

解決方案1
0 2021-04-27 02:59:36

解決方案2
0 2021-04-27 03:01:01

HTML 中的背景顏色不適用於整個頁面

問題描述

2 個解決方案

解決方案1 0 2021-04-27 02:59:36

解決方案2 0 2021-04-27 03:01:01

解決方案1
0 2021-04-27 02:59:36

解決方案2
0 2021-04-27 03:01:01