gpt4 book ai didi

html - rgba 和 hsla 颜色如何处理不同的颜色。

转载 作者:太空宇宙 更新时间:2023-11-04 10:53:55 25 4
gpt4 key购买 nike

我正在阅读这本书: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.

Demo


在你发表评论后,你问为什么你的边框会调整颜色,所以问题是你使用了 rgba(0,0,0,.1)为你的border相当于 #000 的十六进制用opacityalpha0.1 .现在因为你的边界是不透明的,你可以看到你的 background-color被渲染在后面。

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

关于html - rgba 和 hsla 颜色如何处理不同的颜色。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34805630/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com