Question

我一直在努力环顾四周，因为我知道有很多问题，教程，工具可以实现两个坚实的背景，但问题是我无法实现简单的设计。

我的布局：http://i.stack.imgur.com/b4qO7.jpg

我无法实现的目标：

无论分辨率如何，灰色都从第一个框的中间开始，我无法使用渐变工具。
当我使用CSS应用时，使阴影效果消失。

这是我迄今取得的成就：

  background: -webkit-linear-gradient(top, white 0, White 370px, white 301px, #818285 301px, #818285 300px, #818285 100%) no-repeat;

我希望你能把我的问题视为不同而不是重复，因为我一直在寻找一段时间而没有成功找到类似案例。

Answer 1

在linear-gradient属性中设置颜色后添加百分比，可以达到以下效果：

＆＃13;

html, body{ margin:0; padding:0; height:100%; width:100%; background:#000; }

#container{ 
  width:95%;
  height:90%; 
  margin:auto;
  background:-webkit-linear-gradient( #fff 0%, #fff 40%, #999 40%, #999 100% );
  background:linear-gradient( #fff 0%, #fff 40%, #999 40%, #999 100% );

  /*Vertical Align*/
  position:relative;
  top:50%;
  transform:translateY( -50% );
}

#content{
  width:80%;
  height:80%; 
  background-color:#eee;
  margin:auto;
  
  /*Vertical Align*/
  position:relative;
  top:50%;
  transform:translateY( -50% );
}

p{ 
  margin:0; padding:0; text-align:center; 
  
  /*Vertical Align*/
  position:relative;
  top:50%;
  transform:translateY( -50% );
}

＆＃13;

<html>
  <body>
    <div id="container">
      <div id="content"><p>Div Content Here<p></div>
    </div>
  </body>
</html>

＆＃13;

您添加的停止点或颜色过渡越多，效果就越明显。

Answer 2

我使用了一种解决方法，我不确定这是否是一个干净的解决方案，但它显然是我想要的。

<强> HTML

<body>
  <div class="bg_2"></div>
</body>

<强> CSS

body {
background-color: grey;
}

.bg_2 {
  background-color: white;
  width: 100%;
  height: 380px;
  position: absolute;
  top: 0;
  z-index: -1;
 }

这种方法帮助我实现了两种颜色之间的清晰分离，因为我不知道为什么渐变技术会在停止之间留下柔和的阴影效果，这不是很整洁。我背景的灰色部分也会始终位于固定位置。

奖励：如果您需要构建移动背景，则无论页面高度如何，都可以滚动以保持双色背景，您可以将位置从绝对更改为固定。

固定位置的两个纯色背景

2 个答案: