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

【问题标题】：How can I set a variable linear gradient colour?如何设置可变线性渐变颜色？
【发布时间】：2017-07-30 07:41:58
【问题描述】：

我正在使用受 Chris Coyier 启发的链接中的纯 css 版本的“clamping”： 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%);
}

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

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

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

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

【问题讨论】：

标签： javascript css angularjs sass attr

【解决方案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%);
  }
}

【讨论】：

当然，但我需要动态更改 $background-color 变量。例如一些特殊的 div 是蓝色的，一些是红色的

【解决方案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;
}

【讨论】：

效果很好，但我没有 p 在元素内，我可以注入 span 或内联的东西，但出于兴趣，你能看到没有 p 标签的方法吗？跨度>
@BenTaliadoros 我真的不明白你想要什么，也许 div 包装器可以提供帮助？
@BenTaliadoros 现在我知道你想要的是用单个 dom 实现这个功能。您可以通过添加“box-shadow: inset 10000px 0px red;”来做到这一点到 .module dom;

【解决方案3】：

如果您可以将 pseudo element 替换为 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>

【讨论】：