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

Question

我使用的是 'clamping' 的纯 css 版本，来自 Chris Coyier 的 link 启发： 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%);
}

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

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

使用inherit获取父背景颜色
使用JS(Angular)写入:after元素，并设置背景属性，我觉得我做不到Angular
使用 attr(data-something) 属性访问我可以在 Angular

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

Answer 1

由于您使用的是 Sass，您可以将背景颜色粘贴到变量中吗？例如：

$background-color: #eee;

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

Answer 2

继承方式确实有效。 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;
}

Answer 3

如果你能用span替换伪元素你就可以动态改变颜色

var demo = angular.module('demo', []);
demo.controller("myColor",function($scope){
var background="linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)";
$(".cover").css("background",background);
});

@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;
}
.module p {
  margin: 0;
}


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app='demo'>
    <div class="module fade" ng-controller="myColor">
  <p >Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <span class="cover"></span>
    </div>
</div>

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

How can I set a variable linear gradient colour?

javascript

css

sass

attr

angularjs