Question

我想知道实现两个背景div（蓝色和灰色）的最佳方法是什么，其顶部有一个容器（红色）：

http://s22.postimg.org/44kcq1cqp/screenshot_413.png

我会为背景颜色和100vh创建两个div但是如何在顶部覆盖容器以便我可以创建登录区域？我正在努力实现这样的设计：

http://s22.postimg.org/584h1zxdt/screenshot_414.png

提前致谢！

Answer 1

这是我将如何做到这一点:)

https://fiddle.jshell.net/okjn0oca/

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.content{
  width: 100vw;
  height: 100vh;
}

.left{
  position: absolute;
  top: 0;
  left: 0;
  width: 40vw;
  height: 100vh;
  background-color: blue;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  width: 60vw;
  background-color: green
}

.menu {
  width: calc(100% - 30px);
  height: 50px;
  background-color: red;
  margin: 15px auto;
}

.logo {
  width: 60px;
  height: 30px;
  background-color: red;
  margin: 15px;
}

.text{
  position: absolute;
  width: 30vw;
  height: 100px;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  background-color: yellow;
}

＆＃13;

<div class="content">
  <div class="left">
    <div class="logo">
      
    </div>
    <div class="text">
      
    </div>
  </div>
  <div class="right">
    <div class="menu">
      
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以在身体上使用1px背景图片：

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAFeCAYAAABEunUfAAAAG0lEQVR42mMUYPj/n3GUGCVGiVFilBglhgMBAK5H0KGRPNKKAAAAAElFTkSuQmCC) no-repeat;
background-size: 40% 100%;

Here's a Codepen with the example

使用背景尺寸可以强制像素覆盖宽度的40％和高度的100％。

使用png-pixel.com生成1px背景。

Answer 3

不确定你是否真的尝试过任何东西，但这是你可以尝试的东西。

假设您只想为背景分割颜色，那么您不必使用两个div。您可以使用渐变（不要忘记供应商前缀）。然后，只需要定位＆＃34;叠加＆＃34; div你想要的。

＆＃13;

.bg {
  width: 100%;
  height: 100vh;
  position: relative;
  background: linear-gradient(to right, rgba(0,56,199,1) 0%, rgba(0,56,199,1) 40%, rgba(74,74,74,1) 40%, rgba(74,74,74,1) 100%);
}

.overlay {
  width: 60%;
  height: 25%;
  position: absolute;
  top: 25%;
  left: 10%;
  background: white;
}

＆＃13;

<div class="bg">
  <div class="overlay"></div>
</div>

＆＃13;

Answer 4

使用单个容器。

 <style>
  .main
  {
      background:white;
  }

  .login
  {
       background:blue;
  }
</style>


  <div class="main">
        <div class="col-md-5 no-margin">
           leave it blank
        </div>

        <div class="col-md-7 no-margin login">
           put your page contents here
        </div>
  </div>

40/60分屏，带容器

4 个答案: