- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在阅读这本书: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/
在 golang 颜色包中,有一种方法可以从 RGBA 中获取 r,g,b,a 值对象: func (c RGBA) RGBA() (r, g, b, a uint32) { r = uint
我有一个 OpenGL RGBA 纹理,并使用帧缓冲区对象将另一个 RGBA 纹理传输到它上面。问题是,如果我使用通常的混合函数 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MI
假设我有: 和一些CSS: .dark {background:rgba(10,10,10,0.8);} .lite {background:rgba(200,200,200,0.5)
我正在寻找一种更有效的方法,将在预乘色彩空间中存储为 double 的 RGBA 转换为 8 位整数/ channel RGBA 非预乘色彩空间。这对我的图像处理来说是一项巨大的成本。 对于一个 ch
我需要将 PNG H*W*4 rgba 图像转换为形状为 H*W*3 的 rgb 图像. 我可以做到这一点,但是当我保存它时,图像会再次保存为H*W*4这是代码片段: for idx, image i
我有一个 SCSS 文件,这里是它的一部分。SCSS: $red: 200; $green: 200; $blue: 200; $opa: 1; .th-layout-class{ backg
我尝试使用 libpng 库,但遇到了问题。 我现在正在使用 CLion,并尝试在我的项目中包含这个 libpng 库。问题在于配置该库以在我的项目中使用它而不是使用该库。我认为我可以将 libpng
csslint 警告回退背景(十六进制或 RGB)应该在 RGBA 背景之前。"evidence="background: rgba(0, 0, 0, 0.8);/* FF3+,Saf3+,Opera
你应该使用 rgba(0, 0, 0, 0) 还是 rgba(255, 255, 255, 0) 在 CSS 中实现透明度? 各自的优缺点是什么? 最佳答案 rgba() 函数的最后一个参数是“alp
掩码 CSS #mask { background-color: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top:
我现在有类型不清楚的图片,他可能是jpeg gif,我想将其转换为image.Image,我该怎么办? 下面是我的代码 func imageToPng(img image.Image) (image.
我正在尝试创建导航栏,当用户不在页面顶部时,该导航栏会淡出至 80% 的不透明度。我已经设法让滚动和相应的 CSS 更改正常工作,但我不确定是否会褪色。我尝试过 .fadeTo() ,它似乎将不透明度
我必须自定义一个 iOS 应用,指南说: Please don’t use RGBA values in 0 to 255 decimal notation, but use 0.0 to 1.0 a
HTML 代码: Hello CSS 代码: .item img:hover { background: rgba(0, 0, 0, 0.8) } 当我将鼠标悬停在图像上
我在深色背景上为字母添加了 rgba 颜色,并且在 Chrome (67) 中它周围有一个非常小的白色轮廓。我强加了一个 outline: none 但没有任何改变。 body { backgrou
我想通过 CCS3 创建简单的悬停效果,例如默认图像是黑白的,但是当我悬停到该图像时,将显示该图像的实际颜色。 请帮帮我 最佳答案 您可以使用新属性 filter 但浏览器支持不是很深(参见 http
我正在尝试创建一个与图像大小完全匹配的背景颜色叠加层,并在该叠加层上显示文本。但是背景颜色也覆盖了文字,希望有人帮我解决这个问题。 HTML
我想创建像这张图片这样的输入 enter image description here 我从 stackoverflow 看到了这个链接 Skew Input Border Without Skewi
问题是 rgba 透明度。我应该改变它的背景并使其透明。但是,它只是改变了背景颜色,并没有使其透明。 我经常遇到这个问题,有时有效,有时无效。 我试图弄清楚为什么有时它不起作用,即使我的编码方式与其他
我只是想为图像添加背景颜色 (rgba),但不起作用。 我的 CSS 是: section{ width:100%; height:400px; background: url(../img/back
我是一名优秀的程序员,十分优秀!