`rgb';的参数数目错误(4对3);rails 3.2.13中css.scss文件中的问题
rails中rgb参数数量错误问题: 我看到css文件中的rgb使用了这里提到的3个参数 但是在我的项目abc.css.scss文件中有这样的代码`rgb';的参数数目错误(4对3);rails 3.2.13中css.scss文件中的问题,css,ruby-on-rails-3.2,sass,Css,Ruby On Rails 3.2,Sass,rails中rgb参数数量错误问题: 我看到css文件中的rgb使用了这里提到的3个参数 但是在我的项目abc.css.scss文件中有这样的代码 border: 1px solid rgb(100, 100, 100, 2); border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1); -moz-box-shadow: 0px 3px 2px rgba(67, 67,
border: 1px solid rgb(100, 100, 100, 2);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
-moz-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
那么这里发生了什么。我错过什么了吗
提前谢谢 答案不言自明
rgb
需要3个参数,所以需要给它3个,而不是4个
这就是你想要的:
border: 1px solid rgb(100, 100, 100);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
-moz-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
请注意,第一行已更改
如果保留第4个参数,则第一行代码将不起作用。它将被忽略,没有任何效果
:您会注意到方形为黑色,因为带有第4个参数的
rgb
无效,因此未应用第4个参数用于alpha
例如rgba(0,0,0,1)代码>
这里.1
是alpha/不透明度
为什么他要两次宣布正确的答案
border: 1px solid rgb(100, 100, 100, 2);
/* This is fall back if browser doesn't support `rgba` but
here the 4th parameter shouldn't be there, it's making the proerty useless.. */
border: 1px solid rgba(0, 0, 0, 0.2);
/* Here he is having black color with an alpha of .2 */
因此,如果使用带有4个参数的rgb
,则属性值无效,因此需要从Sass中第一个属性的rgb
中删除最后一个参数,rgb()
和rgba()
是创建颜色类型变量的函数。编译为CSS时,它看起来与函数语法相同。颜色类型是必要的,以使其符合与颜色操纵函数(light()、darken()等)一起使用的条件
rgb()
函数必须正好有3个参数。rgba()
函数必须有2个或4个参数,最后一个参数的值必须介于0和1之间。简短而甜蜜的答案是,当您使用rgb
时,您无法传递alpha属性。使用rgba
使用alpha
根据MDN,支持CSS颜色级别4的浏览器的操作与预期完全一致。第四个参数是可选的,显然默认值为1,尽管目前我没有看到任何地方专门记录的默认值。
那么哪些浏览器支持这一点呢
caniuse.com有一个间接指示符,RGBA十六进制符号。到今天为止,它看起来非常积极,超过75%,但我有限的测试表明,对CSS rgb函数的第4个参数的支持比这要少。我已经创建了一个codepen,它可以在最新的Firefox和Windows上的Chrome以及Android 7上的Chrome中使用。它还验证第4个参数的默认值是否为1。这是CSS:
body {
background:linear-gradient(90deg, rgb(255, 0, 153.6, 0), rgb(255, 0, 153.6) 100%);
}
body {
background:linear-gradient(90deg, #FF009900, #FF0099 100%);
}
如果你看到不透明度从0变为1,从左到右,那么它就工作了。
它不适用于iOS 11上的Chrome或Safari。但是,使用十六进制表示法在我测试过的所有5种环境中都有效。以下是CSS:
body {
background:linear-gradient(90deg, rgb(255, 0, 153.6, 0), rgb(255, 0, 153.6) 100%);
}
body {
background:linear-gradient(90deg, #FF009900, #FF0099 100%);
}
有人对CSS颜色级别4的这一方面及其支持有更具体的信息吗?我为和添加了两个单独的测试代码笔。iOS 11上的两个浏览器都不支持。mmmmm@musefan我知道我的朋友:)但是这个项目是由其他人预先启动的,并且有代码。所以我有点困惑,我是否遗漏了什么,以及如何处理第四个参数?那有什么用,所以你要放弃那一个。我在这里讨论第四个参数是否有任何意义,因为rgb中有这么多第四个参数:)是的,去掉它。它可以做任何事情是的,但那是在0和1之间,但第一行是2。塞特怎么办?