14

我正在开发一个 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 像素（不是百分比）？

4

4 回答 4

7

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

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

于 2015-07-17T09:04:11.820 回答
2

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

每对的第一行具有堆叠 2 个背景的解决方案，第二行具有正在使用的计算。不适用于 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>

于 2018-03-21T14:54:05.107 回答
1

我认为这是不可能的，但是覆盖 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);
}
于 2013-03-15T15:10:35.400 回答
1

在来自 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;
}
<div class="test"></div>

于 2015-05-24T15:17:25.837 回答