Question

我正在使用纯粹的css版本的“夹紧”＃39;从这个链接灵感来自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%);
}

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

我只能想到两个我不认为工作的选择。这就是我尝试过的：

使用inherit获取父级背景颜色
使用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;
}

Answer 2

既然您正在使用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 3

如果您可以将伪元素替换为 span ，则可以动态更改颜色

＆＃13;

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);
});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: