我正在阅读这本书:CSS secret :日常 Web 设计问题的更好解决方案。并遇到了颜色设置 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颜色设置?它们似乎在那里是固定值。并且由于透明是线性渐变中的最后一个变量。我不确定这是如何工作的。有人可以帮忙解释一下吗?
最佳答案
不确定您在问什么,但我想您想知道您的元素如何获得 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
与 .greenButton
这就是使用普通 .button
获得不同颜色的方式类,您可以通过定义其他类来覆盖它们。
.greenButton {
background-color: #6b0; /* Overrides your #58a when you call
this class with .button */
}
Order in your CSS does matter. If you move the declaration of
.greenButton
and.redButton
above.button
, your buttons will always be of default color which is bluish.
在你发表评论后,你问为什么你的边框会调整颜色,所以问题是你使用了 rgba(0,0,0,.1)
为你的border
相当于 #000
的十六进制用opacity
即alpha
的 0.1
.现在因为你的边界是不透明的,你可以看到你的 background-color
被渲染在后面。
现在我可以向你解释边界是如何工作的,但我认为这不在这个问题的范围内。
关于html - rgba 和 hsla 颜色如何处理不同的颜色。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34805630/