如何使用线性渐变将两种水平背景颜色合二为一 div？

Question

我想将两种水平背景颜色合二为一div。我为此使用线性渐变，但这里的问题是两种颜色之间的褪色（混合）效果。我想删除该效果，以便我的颜色彼此相邻，没有任何渐变效果或边框。此外，请告诉我我的这段代码是否正确，并且不太可能对我不擅长编码的任何浏览器造成任何问题。

 background: -moz-linear-gradient( white 35%, black 65%);
 background: -webkit-linear-gradient( white 35%, black 65%);
 background: linear-gradient( white 35%, black 65%);

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/303/

 div {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(35%, rgba(255,255,255,1)), color-stop(35%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
}

Answer 2

Bootstrap: 如果你想在上面放一些东西，只需为另一个 div.

设置绝对位置

.container-fluid {
  float: left;
}
#first {
  height: 100px;
  width: 600px;
  background-color: red;
}
#second {
  height: 100px;
  width: 600px;
  background-color: blue;
}
#third {
  height: 100px;
  width: 600px;
  background-color: green;
}
p {
  position: absolute;
  float: left;
  font-size: 9em;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <title>HTML5, CSS3 and JavaScript demo</title>
</head>

<body>
  <!-- Start your code here -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12" id="first">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" id="second">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" id="third">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <p>some text</p>
  </div>

  <!-- End your code here -->
</body>

</html>

如何使用线性渐变将两种水平背景颜色合二为一 div？

How to get two horizontal background colors in one div using linear gradient?

css

linear-gradients