가변 선형 그래디언트 색상을 어떻게 설정할 수 있습니까?

Question

크리스 Coyier 영감이 링크에서로 '클램프'의 순수 CSS 버전을 사용하고 있습니다 :

이

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

때로는 배경은 다음과 같습니다 http://codepen.io/bental/pen/JWEaJg

이 나는 ​​등 (말대꾸) CSS를 의미 흰색이 아니므로 두 번째 색상을 가변 색상으로 설정하고 싶습니다.

내가 생각할 수있는 두 가지 옵션은 작동하지 않는다고 생각할 수 있습니다. 이것은 내가 무엇을 시도했다입니다 : 요소 후, 나는 생각하지 않는다 배경 속성을 설정합니다

• 를 사용하여 상속이에 쓸 부모의 배경 색상 (각도)
• 사용 JS를 얻을 수 나는 나를 위해 각도

어느 작품에서 설정할 수있는 부모의 속성에 액세스 할 각도

사용에 ATTR (데이터 뭔가) 속성을 할 수 있습니다. 누구도 의사 요소 (이 경우 : 후)에 선형 그래디언트를 설정할 수있는 방법을 알고 있습니까?

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

당신이 색상을 변경할 수 있습니다 동적

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>