pe-background-image()

/.tmp_src/docs/application.css
options IE Chrome Firefox Safari Opera iOS Android Can I use
複数の背景 9 OK 3.6 1.3 OK OK OK CSS3 Background-image options
グラデーション 10 OK 4 4 12.1 4.3 4 CSS Gradients
引数 初期値 備考
$images なし <List> β版
  • background-image に複数の背景を適用して返す。
  • linear-gradient radial-gradient の複数指定を想定(gradient 以外でこの @mixin を使用する利点がない)。
  • 複数指定を想定しているため、フォールバックとして background-color は返さない。
  • 注意点(β版故の)
    • iOS 4.2 & ~ Android 3.0 に対応させたい場合は -webkit-gradient() を別途併記する。
    • 絶賛検証中。
@mixin pe-background-image($images...) {
  ...
}
.class-name {
  @include pe-background-image(
    url("/images/logo.png"),
    linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%),
    linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%)
  );
}
.class-name {
  background-image:
    url("/images/logo.png"),
    -webkit-linear-gradient(top, #ffffff 90%, #faf8f5 100%),
    -webkit-linear-gradient(-430deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
  background-image:
    url("/images/logo.png"),
    linear-gradient(to bottom, #ffffff 90%, #faf8f5 100%),
    linear-gradient(160deg, #999ca8 0, #999ca8 60%, #6b6f7d 62%, #6b6f7d 100%);
}
Last update at 2016/09/16 15:55

Styleguide