引数 |
初期値 |
値 |
備考 |
$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%);
}