我们在网站上有一个很大的应用程序,我们有一些链接,比如说蓝色的就像这个网站上的蓝色链接。现在我想做一些其他的链接,但是用浅一点的颜色。显然,我可以简单地通过在CSS文件中添加十六进制代码来做,但我们的网站让用户决定他们想要的自定义配置文件/网站(如Twitter)的颜色。
所以,我的问题是:我们能减少百分比的颜色吗?
让我们说下面的代码是CSS:
a {
color: blue;
}
a.lighter {
color: -50%; // obviously not correct way, but just an idea
}
OR
a.lighter {
color: blue -50%; // again not correct, but another example of setting color and then reducing it
}
有没有办法将颜色减少一个百分比?
把它们结合在一起,一个纯粹用DIV和CSS做的表解决方案,试试吧;)浏览器应该通过....支持RGBA颜色
<head>
<style>
.colored-div-table {
display: table;
table-layout: fixed;
}
.colored-div-table #col {
display: table-column;
}
.colored-div-table #col:nth-child(odd) {
}
.colored-div-table #col:nth-child(even) {
}
.colored-div-table #col:nth-child(1){
background-color: lightblue;
width: 50px !important;
}
.colored-div-table #col:nth-child(2){
background-color: lightyellow;
width: 200px !important;
}
.colored-div-table #col:nth-child(3){
background-color: lightcyan;
width: 50px !important;
}
.colored-div-table #row {
display: table-row;
}
.colored-div-table #row div {
display: table-cell;
}
.colored-div-table #row div:nth-child(1) {
}
.colored-div-table #row div:nth-child(2) {
}
.colored-div-table #row div:nth-child(3) {
}
.colored-div-table #row:nth-child(odd) {
background-color: rgba(0,0,0,0.1)
}
.colored-div-table #row:nth-child(even) {
}
</style>
</head>
<body>
<div id="divtable" class="colored-div-table">
<div id="col"></div>
<div id="col"></div>
<div id="col"></div>
<div id="row">
<div>First Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Second Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Third Line</div><div>TL C2</div><div>TL C3></div>
</div>
<div id="row">
<div>Forth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Eight Line</div><div>EL C2</div><div>EL C3></div>
</div>
<div id="row">
<div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
</div>
<div id="row">
<div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
</div>
</div>
</body>
我正在使用原始CSS3和SVG添加一个答案,不需要LESS或SASS。
基本上,如果问题是为了全局悬停效果而将颜色调亮10%、25%、50%或更暗,你可以像这样创建一个SVG数据调用
:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;
}
.myButton{
color: white;
background-color:blue;
}
.myButton:hover{
background-image: var(--lighten-bg);
}
出于某种原因,我不知道,SVG不允许我在“填充”属性中输入十六进制值,但“白色”和“黑色”满足了我的需求。
发人深思:
如果你不介意使用图片,可以使用50%透明的PNG作为背景图片。如果您想要更花哨,可以调用一个PHP脚本作为背景图像,并将HEX和不透明度值传递给它,然后让它输出上面的SVG代码。
您可以使用一点javascript来计算使用rgb()的较深和较浅的颜色。
提琴:不是很好,但这只是为了说明。
它本质上所做的是设置一个颜色,并选择20个rgb相同数量的颜色(相互比较),仅相隔10个。
for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
var r = 91;
var g = 192;
var b = 222;
$('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) );
};
把它们结合在一起,一个纯粹用DIV和CSS做的表解决方案,试试吧;)浏览器应该通过....支持RGBA颜色
<head>
<style>
.colored-div-table {
display: table;
table-layout: fixed;
}
.colored-div-table #col {
display: table-column;
}
.colored-div-table #col:nth-child(odd) {
}
.colored-div-table #col:nth-child(even) {
}
.colored-div-table #col:nth-child(1){
background-color: lightblue;
width: 50px !important;
}
.colored-div-table #col:nth-child(2){
background-color: lightyellow;
width: 200px !important;
}
.colored-div-table #col:nth-child(3){
background-color: lightcyan;
width: 50px !important;
}
.colored-div-table #row {
display: table-row;
}
.colored-div-table #row div {
display: table-cell;
}
.colored-div-table #row div:nth-child(1) {
}
.colored-div-table #row div:nth-child(2) {
}
.colored-div-table #row div:nth-child(3) {
}
.colored-div-table #row:nth-child(odd) {
background-color: rgba(0,0,0,0.1)
}
.colored-div-table #row:nth-child(even) {
}
</style>
</head>
<body>
<div id="divtable" class="colored-div-table">
<div id="col"></div>
<div id="col"></div>
<div id="col"></div>
<div id="row">
<div>First Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Second Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Third Line</div><div>TL C2</div><div>TL C3></div>
</div>
<div id="row">
<div>Forth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
</div>
<div id="row">
<div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
</div>
<div id="row">
<div>Eight Line</div><div>EL C2</div><div>EL C3></div>
</div>
<div id="row">
<div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
</div>
<div id="row">
<div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
</div>
</div>
</body>