Question

我正在为我的主题开展一个项目，其中我建立了一个服务网站。不幸的是，我处于一种不正常的状态该页面的屏幕截图是：

我想用黑色背景颜色填充整个红色框区域。

Html代码：`

<body background="black">
<div id=pagehead>
    <div class=imagehead>
        <img class=imageheadsrc src="./pics/back.jpg">
    </div>
    <div class=texthead>
        <p class=textheadsrc>CaRental.com</p>
    </div>
 </div><br>
 <br><br>

<button id="myBtn">Login</button>

  <button id="myBtn">Register</button>
  <!-- The Modal -->
  <div id="myModal" class="modal">

   <!-- Modal content -->
   <div class="modal-content">
   <span class="close">x</span>
   <p>Some text in the Modal..</p>
   </div>
   <script>
   // Get the modal
     var modal = document.getElementById('myModal');

      // Get the button that opens the modal
     var btn = document.getElementById("myBtn");

      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];

      // When the user clicks the button, open the modal 
      btn.onclick = function() {
       modal.style.display = "block";
     }

     // When the user clicks on <span> (x), close the modal
     span.onclick = function() {
        modal.style.display = "none";
      }

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
        }
      }
     </script>

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

CSS代码：

           *html{
        background-color:black;
           }
           body{
        background-color:black;
         }


     #pagehead
     {
          width:100%;
            height: 700px;
      }
      .imagehead
         {
                width:100%;
               height:100%;
          background-position: absolute;
          background-size: cover;
       }     
        .imageheadsrc
          {
            width:100%;
            height:100%;
            background-size: cover;
            z-index: 0;
       }
        .texthead
       {
        padding-top: 0;
        margin-top:0%;
        z-index: -1;
       }
        .textheadsrc{
        position: relative;
        font-size: 3em;
          font-weight: bold;
       margin:10px 12px auto 10px;
        color:black;
          text-align:center;
      font-family: 'Josefin Sans', sans-serif;
          }


                   button {
      background-color: white;
         color: black;
        border: 2px solid #4CAF50; /* Green */
        padding: 15px 50px;
        position:center;
         text-align: center;
        text-decoration: none;
         display: inline-block;
          font-size: 16px;
        border-radius: 4px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
     }

      button:hover {
      background-color: #4CAF50; /* Green */
          color: white;
       text-decoration: none;
     }


     .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
         top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
         background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
          }

      /* Modal Content/Box */
      .modal-content {
       background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
         width: 80%; /* Could be more or less, depending on screen size */
        }

       /* The Close Button */
     .close {
         color: #aaa;
         float: right;
         font-size: 28px;
         font-weight: bold;
         }



    .close:hover,
     .close:focus {
      color: black;
      text-decoration: none;
       cursor: pointer;
  }

请指导我，因为我是html和css的新手。

Answer 1

您可以将style="background-color:black;"添加到元素，为其提供黑色背景。

我还注意到您在background="black"标记中使用了body。不推荐使用，您应该使用style="background-color:black;"代替。

Answer 2

只需在CSS中添加规则：

.texthead {
     background-color: black;
     /* The rest of your CSS goes here...*/
}

Answer 3

Style＆＃34; texthead＆＃34;在你的CSS中背景色：黑色;

Answer 4

你有很多错误：
1.不要使用INLINE css。在外部文件中写入css属性 2.关闭你的“”f.ex class =“className” 3.使用正确的break标签，不要用它来将div放在下一行 - 这是完全错误的 4.使用HEX值设置不同元素的颜色（如＃000 /＃000000 - 黑色） 5.使用IMG标签时，为了更快的渲染，添加width =“”，height =“”，图像的高度=“”，标题=“”和alt =“”用于搜索引擎优化的标签。
6.不要使用ID，因为它们是唯一的，更多地依赖于类，当你真的需要为元素添加ID时 7.修复你的-prefix-属性，添加chrome，moz，即不仅仅是-webkit-用于safari 8.不要使用基于％的值作为边距，而是使用像素或者em。

嗯，还有更多的错误......但是现在关注你所遇到的这些问题，如果你修复它们，你将能够改变你的背景颜色：＃000000;黑色:)。

希望你能解决这个简单的问题。

用黑色填充区域

4 个答案: