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

自举：如果你想把一些东西放在其上，那么只为其他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中获得两个水平背景颜色？

2 个答案: