背景：线性渐变（rgba（255,0,0,0.5））未覆盖整个背景

时间：2016-09-14 21:17:50

标签： html5 css3

请为我的代码提供帮助。我真的不能让它发挥作用。我花了4个多小时才弄清楚如何扩展背景线性颜色以完全覆盖背景。我有图片以及h1和p标签，因为您在代码中看到的只是覆盖了我图像背景的一半而不是一直向下。

请告诉我如何解决此问题。

我错过了什么？

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我更改了css id的#empire和#khalifa以使用内联块的显示而不是使用浮点数，并将其宽度调整为50％到calc（50％ - 2px）。

#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: calc(50% - 2px);
	display: inline-block;
}
#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: calc(50% - 2px);
	display: inline-block;
}
<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>
    <script type="text/javascript">
        
    </script>

</div></div>

答案 1 :(得分：0)

  

只需添加一个像<div style="clear:both;"></div>这样的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>

相关问题
最新问题