背景：线性梯度（rgba（255，0，0，0.5））未覆盖整个背景

Question

请帮助我的代码所需。我真的不能让它工作。我花了4个多小时才弄清楚如何扩展背景线性颜色以完全覆盖背景。我有图像和h1和p标签，因为您可以在代码中看到只覆盖了一半的图像背景。

请让我知道如何解决这个问题。

我错过了什么？

#bottom { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-repeat: repeat; 
 
    background-size: cover; 
 
    background-position: fixed; 
 
    background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5)); 
 
} 
 
#khalifa { 
 
    height: 100%; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
#bottom h1 { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    color: maroon; 
 
} 
 
#bottom p { 
 
    text-align: justify; 
 
    padding: 20px; 
 
    font-size: 18px; 
 
    font-family: sans-serif; 
 
} 
 
#bottom img { 
 
    width: 100%; 
 
    height: 700px; 
 
} 
 
#empire { 
 
    width: 50%; 
 
    float: left; 
 
}

<div id="bottom"> 
 
    <div> 
 
    <div id="khalifa"> 
 
     <a href="#"> 
 
     <img src="images/khalifa.jpg" alt=""> 
 
     </a> 
 
     <h1>Burj-Al-Khalifa</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="empire"> 
 
     <a href="#"> 
 
     <img src="images/empire.jpg" alt=""> 
 
     </a> 
 
     <h1>Empire State</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="royal"> 
 
     <a href="#"> 
 
     <img src="images/oneworld.jpg" alt=""> 
 
     </a> 
 
     <h1>Burj-Al-Khalifa</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="empire"> 
 
     <a href="#"> 
 
     <img src="images/kingdom.jpg" alt=""> 
 
     </a> 
 
     <h1>Empire State</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="khalifa"> 
 
     <a href="#"> 
 
     <img src="images/chrysler.jpg" alt=""> 
 
     </a> 
 
     <h1>Burj-Al-Khalifa</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

我改变的CSS的ID #empire，和#khalifa使用内联块，而不是使用浮子的显示，并调整的50％它们的宽度来计算（50％ - 2px的）。

#bottom{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t background-repeat: repeat; 
 
\t background-size: cover; 
 
\t background-position: fixed; 
 
\t background: linear-gradient(rgba(255, 0, 0, 0.5),rgba(0, 255, 0, 0.5),rgba(0, 0, 255, 0.5)); 
 
} 
 
#khalifa{ 
 
\t height: 100%; 
 
\t width: calc(50% - 2px); 
 
\t display: inline-block; 
 
} 
 
#bottom h1{ 
 
\t text-align: center; 
 
\t text-transform: uppercase; 
 
\t font-weight: bold; 
 
\t color: maroon; 
 
} 
 
#bottom p{ 
 
\t text-align: justify; 
 
\t padding: 20px; 
 
\t font-size: 18px; 
 
\t font-family: sans-serif; 
 
} 
 
#bottom img{ 
 
\t width: 100%; 
 
\t height: 700px; 
 
} 
 
#empire{ 
 
\t width: calc(50% - 2px); 
 
\t display: inline-block; 
 
}

<div id="bottom"> 
 
\t \t \t <div> 
 
\t \t \t \t <div id="khalifa"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a href="#"><img src="images/khalifa.jpg" alt=""></a> 
 
\t \t \t \t \t <h1>Burj-Al-Khalifa</h1> 
 
\t \t \t \t \t <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the world, standing at 829.8 m (2,722 ft)</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="empire"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a href="#"><img src="images/empire.jpg" alt=""></a> 
 
\t \t \t \t \t <h1>Empire State</h1> 
 
\t \t \t \t \t <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the world, standing at 829.8 m (2,722 ft)</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="royal"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a href="#"><img src="images/oneworld.jpg" alt=""></a> 
 
\t \t \t \t \t <h1>Burj-Al-Khalifa</h1> 
 
\t \t \t \t \t <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the world, standing at 829.8 m (2,722 ft)</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="empire"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a href="#"><img src="images/kingdom.jpg" alt=""></a> 
 
\t \t \t \t \t <h1>Empire State</h1> 
 
\t \t \t \t \t <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the world, standing at 829.8 m (2,722 ft)</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="khalifa"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a href="#"><img src="images/chrysler.jpg" alt=""></a> 
 
\t \t \t \t \t <h1>Burj-Al-Khalifa</h1> 
 
\t \t \t \t \t <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the world, standing at 829.8 m (2,722 ft)</p> 
 
\t \t \t \t </div> 
 
    <script type="text/javascript"> 
 
     
 
    </script> 
 

 
</div></div>

Answer 2

只需添加一个div像<div style="clear:both;"></div>因为你在CSS中使用花车，所以你必须清除这些花车。清除浮动它工作正常后，我只是说是c

#bottom { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-repeat: repeat; 
 
    background-size: cover; 
 
    background-position: fixed; 
 
    background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5)); 
 
} 
 
#khalifa { 
 
    height: 100%; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
#bottom h1 { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    color: maroon; 
 
} 
 
#bottom p { 
 
    text-align: justify; 
 
    padding: 20px; 
 
    font-size: 18px; 
 
    font-family: sans-serif; 
 
} 
 
#bottom img { 
 
    width: 100%; 
 
    height: 700px; 
 
} 
 
#empire { 
 
    width: 50%; 
 
    float: left; 
 
}

<div id="bottom"> 
 
    <div> 
 
    <div id="khalifa"> 
 
     <a href="#"> 
 
     <img src="images/khalifa.jpg" alt=""> 
 
     </a> 
 
     <h1>Burj-Al-Khalifa</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="empire"> 
 
     <a href="#"> 
 
     <img src="images/empire.jpg" alt=""> 
 
     </a> 
 
     <h1>Empire State</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="royal"> 
 
     <a href="#"> 
 
     <img src="images/oneworld.jpg" alt=""> 
 
     </a> 
 
     <h1>Burj-Al-Khalifa</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="empire"> 
 
     <a href="#"> 
 
     <img src="images/kingdom.jpg" alt=""> 
 
     </a> 
 
     <h1>Empire State</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 

 
    <div id="khalifa"> 
 
     <a href="#"> 
 
     <img src="images/chrysler.jpg" alt=""> 
 
     </a> 
 
     <h1>Burj-Al-Khalifa</h1> 
 
     <p>The Burj Khalifa (Arabic: برج خليفة‎‎, Arabic for "Khalifa Tower"; pronounced English /ˈbɜːrdʒ kəˈliːfə/), known as the Burj Dubai before its inauguration, is a megatall skyscraper in Dubai, United Arab Emirates. It is the tallest structure in the 
 
     world, standing at 829.8 m (2,722 ft)</p> 
 
    </div> 
 
<div style="clear:both;"></div> 
 
    </div> 
 
</div>