rgba和hsla颜色如何以不同的颜色工作。

我正在阅读这本书：CSS的秘密：更好的解决方案，以日常网页设计问题。并遇到这部分颜色设置CSS可以适用于每种潜在的背景颜色。 css如下：rgba和hsla颜色如何以不同的颜色工作。

.button { 
    padding: .3em .8em; 
    border: 1px solid rgba(0,0,0,.1); 
    background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent); 
    border-radius: .2em; 
    box-shadow: 0 .05em .25em rgba(0, 0, 0, .5); 
    color: white; 
    text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5); 
    font-size: 50px; 
    line-height: 1.5; 
    width: 2.5em; 
} 

.greenButton { 
    background-color: #6b0; 
} 

.redButton { 
    background-color: #c00; 
}

Jsfiddle链接：https://jsfiddle.net/mr7kwxsm/。这确实有用。但我不知道如何...背景色如何作为参数传递给hsla和rgba颜色设置？他们似乎是固定值。由于透明是线性渐变中的最后一个变量。我不确定这是如何工作的。有人可以帮忙解释一下吗？

来源

2016-01-15 Lance Shi

不知道你在问什么，但我想你想知道你的元素是如何得到颜色和red，你已经定义了另一种颜色，使用hsla()梯度是渐变色，带有渐变叠加。

所以它是这样的。您的.button课程的速记属性为background，您指定的linear-gradient只是background-image，而且您还指定了一个十六进制的#58a。如果拆分这种速记你会读到它像

.button { 
    background-image: linear-gradient(hsla(0, 0%, 100%, .2), transparent); 
    background-color: #58a; 
}

现在再往下声明对夫妇更多的类与他们background-color所以当你使用.button和.greenButton在相同的元素，浏览器覆盖的.button的background-color有.greenButton和这就是如何使用普通的.button类获得不同的颜色，并且通过定义其他类来覆盖它们。

.greenButton { 
    background-color: #6b0; /* Overrides your #58a when you call 
          this class with .button */ 
}

订单在你的CSS做的事情。如果您将.greenButton和.redButton的声明移动到.button以上，那么您的按钮将始终为默认颜色，它是蓝色的。

Demo

您的评论之后，你问的是，为什么你的边界适应的颜色，所以事情是，你用rgba(0,0,0,.1)为您border这相当于#000十六进制与opacity即alpha的0.1。现在，由于你的边框是不透明的，你可以看到你的background-color被渲染。

现在我可以向你解释边界是如何工作的，但我认为这不在这个问题的范围之内。

来源

2016-01-15 06:52:54

谢谢你的快速回答。我想我对hsla和rgba定义在.button定义中的工作方式更感兴趣。以及如何将颜色值传递给边框，阴影框和文本阴影之类的东西？ –

@LanceShi就像你的十六进制工作？ –

不是。所有三个按钮的边框颜色都不相同。我知道这不是很清楚。但我将边框调整为5px，很明显，它们的颜色不同。 –

类.button利用属性background来设置各种属性（颜色和透明渐变）。在.greenButton和.redButton的类中，只会覆盖background-color元素。因此，不属于背景元素的所有属性都保持不变。

来源

2016-01-15 06:58:40 WalterB

rgba和hsla颜色如何以不同的颜色工作。

回答

相关问题