rails 3.2.13中css.scss文件中`rgb'问题的参数个数错误（4个为3）

Posted 2021-04-07

rgb在rails中发出错误的参数数量：

我看到css文件中的rgb需要3个参数，如此处所述

http://www.w3schools.com/cssref/css_colors.asp

但是在我的项目中，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, 67, 0.1);

那么这里发生了什么。我错过了什么吗？

提前致谢！

答案

第四个参数是alpha

所以例如rgba(0, 0, 0, .1);

这里.1是alpha / opacity

为什么他两次申报正确？

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，则属性值无效，因此您需要从第一个属性中的rgb中删除最后一个参数

另一答案

答案是非常自我解释的。 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个参数，则第一行代码将不起作用。它将被忽略而无效。

See this example：您会注意到方形是黑色的，因为带有第4个参数的rgb无效，因此不适用

另一答案

简短而甜蜜的回答是，当你使用rgb时，你无法传递alpha属性。使用rgba来使用alpha

另一答案

根据MDN here，支持CSS色彩等级4的浏览器确实与OP意图完全相同。第四个参数是可选的，显然默认为1，但我没有看到此时任何地方具体记录的默认值。那么什么浏览器支持这个？

caniuse.com有一个间接指标，RGBA十六进制表示法，here。截至今天，它看起来非常正面，但是我的有限测试显示对CSS rgb函数的第4个arg的支持小于此。我创建了一个codepen here，它适用于Windows上的最新Firefox和Chrome，以及适用于android 7的Chrome。它还验证了第4个arg的默认值是1.这是CSS：

body {
  background:linear-gradient(90deg, rgb(255, 0, 153.6, 0),  rgb(255, 0, 153.6) 100%);
}

如果你看到不透明度从0变为1，从左到右，则它正在工作。它在ios 11上的Chrome或Safari上不起作用。但this codepen，使用十六进制表示法在我测试的所有5种环境中都有效。这是CSS：

body {
  background:linear-gradient(90deg, #FF009900,  #FF0099 100%);
}

有没有人有关于CSS Colors Level 4这方面及其支持的更多具体信息？我添加了两个codepens来分别测试4th arg和numbers with decimals。 iOS 11上的2个浏览器也不支持。

另一答案

在Sass中，rgb()和rgba()是创建具有类型颜色的变量的函数。编译为CSS时，它看起来与函数语法完全相同。颜色类型是必要的，以使其有资格与颜色操作函数（lighten（），darken（）等）一起使用。

https://github.com/nex3/sass/blob/ab4b3b918bfa1fc77a9c4378e199ca1ed6f1704c/lib/sass/script/functions.rb#L366

# Creates a {Color} object from red, green, and blue values.
#
# @param red [Number]
#   A number between 0 and 255 inclusive,
#   or between 0% and 100% inclusive
# @param green [Number]
#   A number between 0 and 255 inclusive,
#   or between 0% and 100% inclusive
# @param blue [Number]
#   A number between 0 and 255 inclusive,
#   or between 0% and 100% inclusive
# @see #rgba
# @return [Color]
def rgb(red, green, blue)
  assert_type red, :Number
  assert_type green, :Number
  assert_type blue, :Number

  Color.new([red, green, blue].map do |c|
      v = c.value
      if c.numerator_units == ["%"] && c.denominator_units.empty?
        v = Sass::Util.check_range("Color value", 0..100, c, '%')
        v * 255 / 100.0
      else
        Sass::Util.check_range("Color value", 0..255, c)
      end
    end)
end
declare :rgb, [:red, :green, :blue]

# @see #rgb
# @overload rgba(red, green, blue, alpha)
#   Creates a {Color} object from red, green, and blue values,
#   as well as an alpha channel indicating opacity.
#
#   @param red [Number]
#     A number between 0 and 255 inclusive
#   @param green [Number]
#     A number between 0 and 255 inclusive
#   @param blue [Number]
#     A number between 0 and 255 inclusive
#   @param alpha [Number]
#     A number between 0 and 1
#   @return [Color]
#
# @overload rgba(color, alpha)
#   Sets the opacity of a color.
#
#   @example
#     rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
#     rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)
#
#   @param color [Color]
#   @param alpha [Number]
#     A number between 0 and 1
#   @return [Color]
def rgba(*args)
  case args.size
  when 2
    color, alpha = args

    assert_type color, :Color
    assert_type alpha, :Number

    Sass::Util.check_range('Alpha channel', 0..1, alpha)
    color.with(:alpha => alpha.value)
  when 4
    red, green, blue, alpha = args
    rgba(rgb(red, green, blue), alpha)
  else
    raise ArgumentError.new("wrong number of arguments (#{args.size} for 4)")
  end
end
declare :rgba, [:red, :green, :blue, :alpha]
declare :rgba, [:color, :alpha]

rgb()函数必须有3个参数。 rgba()函数必须具有正好2或4个参数，最后一个参数是0到1之间的值。