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

我使用“夹紧”的纯CSS版本从这个链接由克里斯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%); 
}

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

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

使用继承得到父母的背景颜色
使用JS（角）写入：元素后，并设置背景属性，我不认为我可以在角
用做ATTR（数据事）属性上，我可以在角

无论工作设置为我父访问的属性。有谁知道我可以如何设置伪元素上的线性渐变（在这种情况下：后）？

来源

2017-03-09 Ben Taliadoros

继承方式实际上起作用。 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; 
}

来源

2017-03-09 11:05:01 blackmiaool

工作得很好，但我没有在元素内部的p，我可以注入一个跨度或内联的东西，但出于兴趣，你能看到没有p标签的方式吗？？ –

@BenTaliadoros我真的不明白你想要什么，也许一个div包装可以帮助吗？ – blackmiaool

@BenTaliadoros现在我知道你想要的是用一个dom来实现这个功能。您可以通过添加“box-shadow：inset 10000px 0px red;”来完成此操作到.module dom; – blackmiaool

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

$background-color: #eee; 

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

来源

2017-03-09 11:03:01 gwcodes

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

如果你能跨度更换伪元素你可以改变颜色动态

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>

来源

2017-03-09 11:39:20 Amal

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

回答

相关问题