如何設置可變的線性漸變顏色？

我使用「夾緊」的純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

如何設置可變的線性漸變顏色？

回答

相關問題