CSS渐变颜色以像素为单位停止答案

【问题标题】：CSS gradient colour stops from end in pixelsCSS渐变颜色以像素为单位停止
【发布时间】：2012-11-22 09:56:57
【问题描述】：

我正在开发一个 HTML/CSS/JS 项目，其中应用程序是固定大小的，并且必须根据设计精确定位元素。因为窗口大小是固定的，所以我可以轻松地在 CSS 中使用像素尺寸，而不必担心调整浏览器的大小。我也不必担心 IE 或 Opera：该应用程序必须只能在 webkit 和 firefox 中运行。

在一些地方，我需要一个渐变背景超过特定数量的像素。这很容易用类似的东西来完成

background-image: linear-gradient(to top, #666666, #000000 60px);

（以及它的-webkit- 和-moz- 对应物。）这对大多数元素都有效。但是，有几个地方我需要设置颜色停止的顶部和底部像素位置。如果这些是百分比，那么可以通过以下方式完成：

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);

（从灰色到黑色超过 60 像素，然后是透明的，然后在最后 10% 上从黑色到灰色）。但是，我需要对像素完成相同的操作，因为所讨论的元素在不同时间的大小不同。如果需要，我想避免使用 JS 在不同的动态计算百分比处重新应用渐变。

所以，我的问题：有没有办法从末尾指定一个色标 x pixels（不是百分比）？

【问题讨论】：

标签： css linear-gradients

【解决方案1】：

它适用于calc()，但不幸的是不适用于 MS 浏览器：

每对的第一行具有堆叠 2 个背景的解决方案，第二行使用 calc。不适用于 Internet Explorer 和 Edge 浏览器。

div {
  margin-left: auto;
  margin-right: 0;
  width: 200px;
  height: 20px;
  animation: sweep 5s ease-in-out alternate infinite;
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  line-height: 20px;
  will-change: width;
}

div:nth-child(odd) {
  background-image: linear-gradient(to right, red, green 100px, transparent 101px), linear-gradient(to left, red, green 100px);
  border-bottom: 1px solid gray;
}

div:nth-child(even) {
  background-image: linear-gradient(to right, red, green 100px, green calc(100% - 100px), red);
  margin-bottom: 10px;
}

div:nth-child(n+3) {
  width: 300px;
}

div:nth-child(n+5) {
  width: 400px;
}

div:nth-child(n+7) {
  width: 500px;
}

div:nth-child(n+9) {
  width: 600px;
}

@keyframes sweep {
  100% {
    width: 600px;
  }
}

<div> 200 </div>
<div></div>
<div> 300 </div>
<div></div>
<div> 400 </div>
<div></div>
<div> 500 </div>
<div></div>
<div> 600 </div>
<div></div>

【讨论】：

【解决方案2】：

我刚刚通过搜索引擎找到了这个，我认为最好的解决方案已经由使用 多个背景图像的 vals 给出 - 但我认为它不是使用 background-size 和 background-position在此处（使用rgba()）使用 alpha 颜色 更加灵活和稳定，如下例所示：

background-image:
    /* top gradient - pixels fixed */
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),  
    /* background gradient - relative */
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ;

这正是我最初寻找的行为。 :)

演示：http://codepen.io/Grilly86/pen/LVBxgQ

【讨论】：

这很聪明！太糟糕了，我们不能使用负值或像“右 16px”这样的东西来定位常规背景图像。

【解决方案3】：

在来自 po228 的上一个答案的行中，但在相同的元素背景中。

设置 2 种不同的渐变，一种从顶部开始，另一种从底部开始

.test {
  background: linear-gradient(to top, red 10px, white 10px),
      linear-gradient(to bottom, blue 10px, white 10px);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: bottom center, top center;
  height: 150px;
  width: 300px;
}

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

我认为这是不可能的，但是覆盖 2 个对象，一个从底部带有不透明像素，另一个从顶部带有像素，仍然可以避免使用 JS

.background {
    position: absolute;
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
    position: relative;
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}

【讨论】：