javascript - 如何设置可变线性渐变颜色？

Question

我正在使用纯 css 版本的“clamping”，灵感来自于 Chris Coyier 的链接: http://codepen.io/bental/pen/JWEaJg

这意味着我有 css (sass)，例如:

.clamp:after {
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

有时背景不是白色，所以我想做的是将第二种颜色设置为可变颜色。

我只能想到两个我认为行不通的选项。这是我尝试过的:

• 使用继承来获取 parent 的背景颜色
• 使用 JS (Angular) 写入 :after 元素，并设置背景属性，我认为在 Angular 中无法做到这一点
• 使用 attr(data-something) 属性访问父级上的属性，我可以在 Angular 中设置该属性

都不适合我。有谁知道如何在伪元素上设置线性渐变(在本例中为:after)？

Answer 1

继承的方式确实有效。 http://codepen.io/blackmiaool/pen/dvNqQM

修改CSS如下:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  padding: 20px;
  font: 1.2em/1.2em 'Open Sans', sans-serif;
}
.module {
  width: 250px;
  margin: 0 0 1em 0;
  overflow: hidden;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), red 50%);
}
.module p {
  margin: 0;
  background:red;
}


.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background:inherit;
}