Railsでrgbの間違った数の引数の問題が発生しました：
ここで述べたように、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);
ここで何が起こっているのでしょうか。何か不足していますか？
前もって感謝します！
4番目のパラメータはalpha
たとえばrgba(0, 0, 0, .1);
これ.1がアルファ/不透明度です
なぜ彼は適切なものを2回宣言しているのですか?
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
MDN hereによると、CSS Colors Level 4 をサポートするブラウザーは、OP が意図したとおりに動作します。4 番目の引数はオプションであり、明らかに既定値は 1 ですが、現時点では既定値が具体的に文書化されている場所はありません。では、どのブラウザがこれをサポートしていますか?
caniuse.com には、RGBA 16 進数表記の間接インジケーターがあります。今日の時点で 75% 以上とかなりポジティブに見えますが、私の限られたテストでは、CSS rgb 関数の 4 番目の引数のサポートがそれよりも少ないことが示されています。ここでcodepen を作成しました。これは、Windows の最新の Firefox と Chrome、および Android 7 の Chrome で動作します。また、4 番目の引数のデフォルト値が 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 では動作しません。ただし、16 進数表記を使用するこの codepenは、テストした 5 つの環境すべてで動作します。CSSは次のとおりです。
body {
background:linear-gradient(90deg, #FF009900, #FF0099 100%);
}
CSS Colors Level 4 とそのサポートのこの側面について、より具体的な情報を持っている人はいますか? 4 番目の argとdecimals を含む数値のテストを分離するために、2 つの codepen を追加しました。iOS 11 の 2 つのブラウザーはどちらもサポートしていません。
Sass では、rgb()とはcolorrgba()型の変数を作成する関数です。CSS にコンパイルすると、関数の構文と同じに見えます。色操作関数 (lighten()、darken() など) で使用できるようにするには、色の種類が必要です。
# 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()、最後の引数が 0 から 1 の間の値である 2 つまたは 4 つの引数が必要です。