Question

我只有一个标题div到这个div有一个导航栏，然后有一些内容我只是给了标题div一个背景颜色，但该背景不包括孔屏幕宽度我只是想要那个背景覆盖孔屏宽度，但左，上，右边有空白区域这是html代码：

<!--Start header section-->
<div class="header">
   <div class="container">
    <div class="top-nav">
        <h1>Apptastico</h1>
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="content">
        <img src="photos/iPhone.jpg" alt="">
        <div class="web-design">
            <h1>We design iOS apps</h1>
            <h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4>
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu 
            tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim.
             Phasellus molestie tempor. Suspendisse dictum feugiat.
             </p>
            <input type="submit" value="Request qoute">
        </div>
    </div>
</div>
</div>
<!--End header section-->

这里是css代码

.header{
    background-color: #4b5a65;
    height: 505px;
    overflow: hidden;
    padding-top: 10px;
}

这就是浏览器界面中出现的结果：

Answer 1

申请

body{
  margin:auto;
}

请参阅下面的代码段

＆＃13;

.header{
    background-color: #4b5a65;
    height: 505px;
    overflow: hidden;
    padding-top: 10px;
}
body{
  margin:auto;
}

＆＃13;

<!--Start header section-->
<div class="header">
   <div class="container">
    <div class="top-nav">
        <h1>Apptastico</h1>
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="content">
        <img src="photos/iPhone.jpg" alt="">
        <div class="web-design">
            <h1>We design iOS apps</h1>
            <h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4>
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu 
            tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim.
             Phasellus molestie tempor. Suspendisse dictum feugiat.
             </p>
            <input type="submit" value="Request qoute">
        </div>
    </div>
</div>
</div>
<!--End header section-->

＆＃13;

Answer 2

你的背景不是整个屏幕。您应该提到背景以获得整个宽度。

background-size：cover;

Answer 3

 <img src="photos/iPhone.jpg" alt="" />

 <input type="submit" value="Request qoute" />

通常当我在页面上放置图像或输入标签时，它会在最后附带斜杠。这可能会也可能不会产生影响。

与该图像的替代文字相同。尝试在那里放任意字。

CSS背景色问题

3 个答案: