<p></p>
<p class="p0"></p>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
p{
height:30px;
}
.p0{
background-color:#5c7a29;
}
.p1{
/*
让颜色变亮
lighten($color, $amount)
$amount 的取值在0% - 100% 之间
*/
background-color: lighten(#5c7a29, 30%);
}
.p2 {
// 让颜色变暗
background-color: darken(#5c7a29, 15%);
}
.p3 {
// 降低颜色透明度
// background-color: opacify(#5c7a29,0.5);
background-color: opacify(rgba(#5c7a29, 0.1), 0.5);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.