CSS渐变方向只有一个部分答案

【问题标题】：CSS gradient direction for only one sectionCSS渐变方向只有一个部分
【发布时间】：2019-11-02 05:08:37
【问题描述】：

我有一个看起来像这样的 CSS 渐变

我使用的代码如下

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

如您所见，左侧 50% 由单色组成，右侧 50% 具有从左到右的渐变。我想让正确的渐变从下到上流动。我该怎么做？

【问题讨论】：

你想要这个背景渐变到单个类还是 div？
是的。我想将此渐变应用于单页背景

标签： html css gradient linear-gradients

【解决方案1】：

默认情况下，渐变是从上到下应用的，在您的课程中，您将 90 度旋转归因于渐变，通过将度数修改为 180，它会产生从下到上的渐变。

background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

更多信息请参考Here

【讨论】：

我希望仅更改右侧部分的渐变方向（具有从左到右渐变的部分）。不幸的是，这个解决方案并没有做到这一点。它使整个梯度从上到下流动

【解决方案2】：

为此，您必须对此类要求使用伪选择器，它非常适合您。根据您的要求，您不可能需要垂直渐变，并且宽度的前 50% 是正常颜色，为此我们将渐变应用到页面的整个宽度，然后使用伪选择器 :before 覆盖左侧 50% 宽度以获取更多信息理解遵循sn-p代码。

.bg_container {
  position: relative;
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(231,244,249,1) 0%, rgba(255,255,255,1) 100%);
}
.bg_container:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: rgba(243,249,252,1);
  z-index: 0;
  content: "";
}
.page_content{
  position: relative;
}

<div class="bg_container" style="height: 400px;">
  <div class="page_content">
    hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
  </div>
</div>

将高度应用于 div 只是例如它取决于您的页面内容。

希望这段代码对你有帮助。

谢谢...

【讨论】：

【解决方案3】：

我尝试了两种方法，最适合你使用。

#grad1 {
  background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(0deg, red 30%, blue 70%);
  position: relative;
  z-index: 0;
  padding: 15px;
}


/*********************/

#grad2 {
  position: relative;
  z-index: 0;
  padding: 15px;
}

p {
  color: white;
}

#grad2:before {
  content: "";
  background: linear-gradient(0deg, red 30%, blue 70%);
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
}

#grad2:after {
  content: "";
  background: linear-gradient(90deg, red 30%, green 70%);
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
}

<div id="grad1">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<br>
<br>

<div id="grad2">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

谢谢！

【讨论】：

【解决方案4】：

您需要考虑多个背景层，使最上面的一层（一种颜色层）仅占用宽度的50% 并将其放在左侧：

html {
 height:100%;
 background: 
   linear-gradient(rgba(243,249,252,1),rgba(243,249,252,1)) left/50% 100%,
   linear-gradient(to top, rgba(231,244,249,1), rgba(255,255,255,1) );
 background-repeat:no-repeat;
}

【讨论】：