Question

我正在读这本书：CSS秘密：日常网页设计问题的更好解决方案。并且遇到了这个部分，其中颜色设置css可以适用于每种潜在的背景颜色。 css如下：

.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颜色设置？它们似乎是固定值。而且透明是线性渐变中的最后一个变量。我不确定这是如何工作的。有人可以帮忙解释一下吗？

Answer 1

不确定您在问什么，但我想您想知道您的元素如何获得green和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时，浏览器会覆盖background-color .button 1}}使用.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在其后面呈现。

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

Answer 2

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

rgba和hsla颜色如何使用不同的颜色。

2 个答案: