用黑色填充区域

-6

我正在为我的主题开发一个项目，其中我为一个服务做了一个网站。不幸的是我在其中是不会正确页面的截图是一个条件：用黑色填充区域

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

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。

来源

2016-02-27 pratik watwani

.texthead { padding-top：0; margin-top：0％; z-index：-1;背景：＃000;颜色：#fff } – devpro

您可以将style="background-color:black;"添加到该元素，使其具有黑色背景。

我还注意到，您在body标记中使用了background="black"。这是弃用的，你应该使用style="background-color:black;"来代替。

来源

2016-02-27 20:41:34 Andrew

只需添加规则在你的CSS：

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

来源

2016-02-27 20:42:08 Ellis

这个类已经包含在css – devpro

我试过了，但是我只在100％宽度的文本行上得到黑色。 –

风格 “texthead” 与背景色你的CSS：黑色;

来源

2016-02-27 21:13:42 Jude

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

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

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

来源

2016-02-27 22:53:37 Mll

好的，谢谢你指出，我希望了解更多。但是添加背景颜色：＃000000;没有颜色的背景一切都保持不变。 –

用黑色填充区域

回答

相关问题