增加渐变的白色部分

Question

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

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

代码 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%，然后从白色渐变到其余 80% 的 #d9d9d9 %.

^{注意：我在下面的代码片段中用 red 替换了 #d9d9d9 以使效果更明显。}

.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>

Answer 2

我相信您的问题不在于渐变，而在于 "Altra Dona" 图像。如果你能设法使它的背景透明（例如在 photoshop 中删除背景并另存为 .png 文件）你的页面看起来会非常好。

如果您仍想更改渐变本身，试试这个：

.top-switch-bg{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left,  #ffffff 1%, #ffffff 30%, #d9d9d9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ffffff), color-stop(30%,#ffffff), color-stop(100%,#d9d9d9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* IE10+ */
    background: linear-gradient(to right,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9d9d9',GradientType=1 ); /* IE6-9 */
}

请记住，这种渐变（多站渐变）在 IE 9 或更低版本中不起作用，因此我强烈建议修复图像。

顺便问一下，使用两次 z-index 有什么意义？您可以毫不费力地摆脱第一个，因为它无论如何都会被最后一个覆盖。

此外，您可能对 CSS 梯度生成器感兴趣 - http://www.colorzilla.com/gradient-editor/ 它是制作任何复杂度梯度的非常方便的工具。

增加渐变的白色部分

Increase the white part of the gradient

html

css

linear-gradients