Skip to content

Instantly share code, notes, and snippets.

@defims
Created April 2, 2018 07:17
Show Gist options
  • Save defims/75bcfacd13154074eea11b14fe9d43da to your computer and use it in GitHub Desktop.
Save defims/75bcfacd13154074eea11b14fe9d43da to your computer and use it in GitHub Desktop.
scss background mixin
//background(0, 0, 100, 100, contain, 50%, 50%)
@mixin background(
$x: 0, $y: 0, // 元素区坐标 x y
$width: 100, $height: 100, // 元素区尺寸 w h
$adaption: contain, // 适配方式 contain cover fill
$horizontal: 50%, $vertical: 50% // 适配区对齐 m n
) {
$v: 1080; // 适配区宽 v
$g: 1920; // 适配区高 g
position: absolute;
left: percentage($x/$v);
top: percentage($y/$g);
width: percentage($width/$v);
height: percentage($height/$g);
background-repeat: no-repeat;
@if($adaption == fill) {
background-size: 100% 100%;
}
@else {
background-size: $adaption;
background-position:
percentage(($horizontal/100%*$v - $x)/$width)
percentage(($vertical/100%*$g - $y)/$height)
;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment