CSS渐变-无混合
我只是想知道是否有可能通过对CSS代码应用一些类似于变亮或变暗的东西来改变较少混合渐变的颜色 以下是较少的混合:CSS渐变-无混合,css,less,Css,Less,我只是想知道是否有可能通过对CSS代码应用一些类似于变亮或变暗的东西来改变较少混合渐变的颜色 以下是较少的混合: .css-gradient(@from: #20416A, @to: #3D69A5) { background-color: @to; background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background-image: -web
.css-gradient(@from: #20416A, @to: #3D69A5) {
background-color: @to;
background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
background-image: -webkit-linear-gradient(top, @from, @to);
background-image: -moz-linear-gradient(top, @from, @to);
background-image: -o-linear-gradient(top, @from, @to);
background-image: -ms-linear-gradient(top, @from, @to);
background-image: linear-gradient(top, @from, @to);
}
在更少的文件中,我想做如下事情:
#div {
width:100px;
height:100px;
.css-gradient (darken, 10%);
}
不知道这是否可行,或者是否有其他方法可以做到这一点。我会这样做:
.css-gradient(darken(#20416A,10%),darken(#3D69A5,10%))
当然,你也可以这样做:
.css-gradient(@from: #20416A, @to: #3D69A5) {
background-color: @to;
background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
background-image: -webkit-linear-gradient(top, @from, @to);
background-image: -moz-linear-gradient(top, @from, @to);
background-image: -o-linear-gradient(top, @from, @to);
background-image: -ms-linear-gradient(top, @from, @to);
background-image: linear-gradient(top, @from, @to);
}
.css-gradient(darken,@amount: 10%, @from: #20416A, @to: #3D69A5){
.css-gradient(darken(@from,@amount),darken(@to,@amount));
}
然后就叫它:
.css-gradient(darken,10%);
或:
或:
少混入:
.gradient(@dir: 0deg; @colors; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
.gradient(@dir; @colors; @prefixes; (@index - 1));
@prefix : extract(@prefixes, @index);
@dir-old: 90 - (@dir);
background-image: ~"-@{prefix}-linear-gradient(@{dir-old}, @{colors})";
& when ( @index = length(@prefixes) ) {
background-image: ~"linear-gradient(@{dir}, @{colors})";
}
}
使用:。梯度(90度,#FFAA64,#FFCD73) 我不太确定您希望通过darken函数实现什么,也许您可以提供一个示例较少且相应的css代码。这会让事情变得更清楚。
.css-gradient(darken,5%,#00ff00,#ff0000);
.gradient(@dir: 0deg; @colors; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
.gradient(@dir; @colors; @prefixes; (@index - 1));
@prefix : extract(@prefixes, @index);
@dir-old: 90 - (@dir);
background-image: ~"-@{prefix}-linear-gradient(@{dir-old}, @{colors})";
& when ( @index = length(@prefixes) ) {
background-image: ~"linear-gradient(@{dir}, @{colors})";
}
}