html - 增加渐变的白色部分

Question

在我的网站标题中，我有一个渐变背景，如下图所示。

我使用下面的代码来创建这个渐变。

代码 CSS:

.top-switch-bg {
  background: -webkit-linear-gradient(left, white, #d9d9d9);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, white, #d9d9d9);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, white, #d9d9d9);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, white-space, #d9d9d9);  /* Standard syntax */
  min-height: 29px;
  position: relative;
  z-index: 10030;
  z-index: 1;
}

<div class="top-switch-bg"></div>

你能告诉我如何在左边添加更多的白色吗？这样看起来不错。

Answer 1

要在左侧有更多的白色，只需增加 color stop point将白色变为如下所示。百分比越高，白色所占的面积越大。

background: linear-gradient(to right, white 20% , #d9d9d9);

目前，您的背景渐变开始从白色变为 #d9d9d9 0%。当在颜色旁边指定 20%(颜色停止点)时，渐变将采用纯白色直到背景大小的 20%，然后从白色渐变到 #d9d9d9 剩下的 80%。

^{注意:我已将下面代码段中的 #d9d9d9 替换为 red 以使效果更加明显。}

.top-switch-bg {
  background: -webkit-linear-gradient(left, white 20%, red);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, white 20%, red);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, white 20%, red);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, white 20%, red);  /* Standard syntax */
  min-height: 29px;
  position: relative;
  z-index: 1;
}

/* Just for demo*/
body {
  background: black;
}

<div class="top-switch-bg"></div>