尝试制作背景颜色块到达屏幕的顶部和底部

Question

我的页面上有一个背景图片，我试图在我的所有内容后面放置一个颜色块，但在边缘留下可见的背景图像。

如何让它到达页面的顶部和底部？

我在我的所有内容周围放置了一个<div>标签，除了角落里的徽标图像（如果有任何不清楚的地方，请告诉我）：

<head>
    <meta charset="utf-8">
<title>Services</title>
<link href="Coppermug Stylesheet Services.css" rel="stylesheet" type="text/css">
    </head>

    <div>
        <a class="home-logo" href="EXAMPLE.html"><img src="EXAMPLE" id=bannerlogo></a>
     </div>

    <div class="white-background">
    <div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
  <a class="nav-link" href="EXAMPLE.html">Home</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="EXAMPLE.html">Services</a>
</li>
          <li class="nav-item">
            <a class="nav-link" href="EXAMPLE.html">About Us</a>
          </li>
<li class="nav-item">
  <a class="nav-link" href="EXAMPLE.html">Contact</a>
</li>
   </div>
</div>


html {
    background-image: url("../Final Logo Assets/Minimized/Blur Mug-min Opacity-min.jpg");
    background-repeat: no-repeat;
  background-size: cover;
}   


.white-background {
    background-color: #FFFFFF; 
    margin-right: 20%;
    margin-left: 20%;
}

Answer 1

我没有完全得到你想要做的，但在大多数情况下，如果你想要从页面的顶部到底部延伸，你可以尝试height: 100%或height: 100vh，vh指视口高度并占用100％你的屏幕高度。

此外，将背景图像用于html标记是一种不好的做法，我建议你使用包装div并使用该div上的背景。

如果你打算使用100vh，使用css的calc函数，但你必须减去导航栏的高度。

示例：如果导航栏为50px，则必须使用height: calc(100vh - 50px)

Answer 2

1.）您需要将height: 100%;用于元素本身及其所有父元素，以便为百分比设置高度参考。

2.）将margin: 0添加到body和html以避免默认保证金。

3.）向你的margin-bottom元素添加一个微小的（1px）顶部和.white-background，以避免折叠其子元素的边缘，从而在其顶部和底部产生边缘

4.）我认为您的徽标具有绝对位置 - 如果没有，请添加它。

html {
  background-image: url("https://placehold.it/800x1200/fa0");
  background-repeat: no-repeat;
  background-size: cover;
}

html,
body {
  height: 100%;
  margin: 0;
}

.white-background {
  background-color: #FFFFFF;
  margin-right: 20%;
  margin-left: 20%;
  height: 100%;
  padding: 1px 0;
}

.home-logo {
  position: absolute;
}

<div>
  <a class="home-logo" href="EXAMPLE.html"><img src="https://placehold.it/100x30/af0" id=bannerlogo></a>
</div>

<div class="white-background">
  <div class="navbar" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="EXAMPLE.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="EXAMPLE.html">Contact</a>
      </li>
  </div>
</div>

Answer 3

HTML和Body标签是其他浏览器中内容的大小，而在其他浏览器中，它们是视口大小，但您可以覆盖应用的默认CSS规则。解决此问题的最简单方法是将<html>标记设置为视口大小。

CSS：

html{
   postion:absolute;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   overflow:auto;
   background:blue; /* this would be your background setup */
}

尝试制作背景颜色块到达屏幕的顶部和底部

问题描述投票：0回答：3

3个回答

最新问题

尝试制作背景颜色块到达屏幕的顶部和底部

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3