为什么背景渐变将内容向下推？

Question

我有一个名为bgGradient 的类，它添加了渐变。当添加.bgGradient 时，它会将我的内容向下推相当多，而我基本上只是希望它作为背景。

.content {
  padding: 100px 0px;
  border: 1px solid blue;
}

.bgGradient {
  border: 1px solid red;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  position: absolute;
  background: rgb(92, 156, 155);
  background: -moz-linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
  background: linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c9c9b", endColorstr="#8ccdcc", GradientType=1);
}

.bgGradient:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100vh 0 0 100vw;
  border-color: #fff transparent #fff transparent;
  z-index: 2;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="wrapper bgGradient">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6 content text-center">
        <h2>this is a test heading</h2>
      </div>
    </div>
  </div>
</div>

Answer 1

不需要额外的元素，可以考虑多个背景：

.content {
  padding: 100px 0px;
  border: 1px solid blue;
}

.bgGradient {
  border: 1px solid red;
  height: 100vh;
  left:0;
  right:0;
  padding: 0;
  margin: 0;
  position: absolute;
  background: 
    linear-gradient(to bottom left,#fff 49.7%,transparent 50%),
    linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="wrapper bgGradient">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6 content text-center">
        <h2>this is a test heading</h2>
      </div>
    </div>
  </div>
</div>

您还可以使用剪辑路径来获得透明度：

.content {
  padding: 100px 0px;
  border: 1px solid blue;
}

.bgGradient {
  border: 1px solid red;
  height: 100vh;
  left:0;
  right:0;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index:0;
}
.bgGradient:before {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;left:0;right:0;bottom:0;
  background: 
    linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
  clip-path:polygon(0 0,0 100%,100% 100%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="wrapper bgGradient">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6 content text-center">
        <h2>this is a test heading</h2>
      </div>
    </div>
  </div>
</div>

或掩码图像：

.content {
  padding: 100px 0px;
  border: 1px solid blue;
}

.bgGradient {
  border: 1px solid red;
  height: 100vh;
  left:0;
  right:0;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index:0;
}
.bgGradient:before {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;left:0;right:0;bottom:0;
  background: 
    linear-gradient(90deg, rgba(92, 156, 155, 1) 0%, rgba(140, 205, 204, 1) 100%);
  -webkit-mask-image:linear-gradient(to bottom left,transparent 49.8%,#fff 50%);
  mask-image:linear-gradient(to bottom left,transparent 49.8%,#fff 50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

<div class="wrapper bgGradient">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6 content text-center">
        <h2>this is a test heading</h2>
      </div>
    </div>
  </div>
</div>