Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit bfbdc02

Browse files
firedefirede
committedJun 13, 2015
增加 bg2x(), bg3x(), bg-dppx(). #23 
1 parent 0d51878 commit bfbdc02

File tree

3 files changed

+114
-29
lines changed

3 files changed

+114
-29
lines changed
 

‎lib/rider/image.styl

+33
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@require 'retina'
99
@require 'typography'
1010

11+
1112
// 设置背景图片
1213
// 自动查找并设置为 retina 设备准备的高清图片
1314
bg($src, $width = null, $height = null)
@@ -38,6 +39,7 @@ bg($src, $width = null, $height = null)
3839
+retina($computed-dppx)
3940
background-image: url($computed-src)
4041

42+
4143
// 图片替换
4244
// 隐藏文字并设置背景图片，可指定背景图片坐标
4345
ir($src, $x = null, $y = null, $width = null, $height = null)
@@ -52,3 +54,34 @@ ir($src, $x = null, $y = null, $width = null, $height = null)
5254
background-position: $x $y
5355

5456
bg($src, $width, $height)
57+
58+
59+
// 使用若干 dppx 倍数的图片
60+
// 若换算后的图片尺寸不为整数，则舍弃小数部分
61+
bg-dppx($dppx, $src, $width = null, $height = null)
62+
63+
if unit($dppx) != ''
64+
error('$dppx 的值必须是一个代表倍数的数字')
65+
66+
if not file-exists($src)
67+
error('$src 必须为本地已存在的图片路径：' + $src)
68+
69+
// 获取图片尺寸
70+
$img-size = image-size($src)
71+
$width = floor($img-size[0] / $dppx) if $width == null
72+
$height = floor($img-size[1] / $dppx) if $height == null
73+
74+
background-image: url($src)
75+
background-size: $width $height
76+
background-repeat: no-repeat
77+
78+
79+
// 使用 2dppx 的图片作为背景
80+
bg2x($src, $width = null, $height = null)
81+
bg-dppx(2, $src, $width, $height)
82+
83+
84+
// 使用 3dppx 的图片作为背景
85+
bg3x($src, $width = null, $height = null)
86+
bg-dppx(3, $src, $width, $height)
87+

‎test/cases/image.css

+54-19
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,153 @@
11
.bg-1 {
2-
background-image: url("../../test/cases/img/logo.png");
2+
background-image: url("img/logo.png");
33
background-size: 150px 88px;
44
background-repeat: no-repeat;
55
}
66
.bg-2 {
7-
background-image: url("../../test/cases/img/rider.png");
7+
background-image: url("img/rider.png");
88
background-size: 136px 136px;
99
background-repeat: no-repeat;
1010
}
1111
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
1212
.bg-2 {
13-
background-image: url("../../test/cases/img/rider@2x.png");
13+
background-image: url("img/rider@2x.png");
1414
}
1515
}
1616
.bg-3 {
17-
background-image: url("../../test/cases/img/rider.png");
17+
background-image: url("img/rider.png");
1818
background-size: 20px 30px;
1919
background-repeat: no-repeat;
2020
}
2121
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
2222
.bg-3 {
23-
background-image: url("../../test/cases/img/rider@2x.png");
23+
background-image: url("img/rider@2x.png");
2424
}
2525
}
2626
.bg-4 {
27-
background-image: url("../../test/cases/img/rider.png");
27+
background-image: url("img/rider.png");
2828
background-size: 20px 136px;
2929
background-repeat: no-repeat;
3030
}
3131
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
3232
.bg-4 {
33-
background-image: url("../../test/cases/img/rider@2x.png");
33+
background-image: url("img/rider@2x.png");
3434
}
3535
}
3636
.ir-1 {
3737
color: transparent;
3838
font: 0/0 a;
3939
text-shadow: none;
40-
background-image: url("../../test/cases/img/rider.png");
40+
background-image: url("img/rider.png");
4141
background-size: 136px 136px;
4242
background-repeat: no-repeat;
4343
}
4444
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
4545
.ir-1 {
46-
background-image: url("../../test/cases/img/rider@2x.png");
46+
background-image: url("img/rider@2x.png");
4747
}
4848
}
4949
.ir-2 {
5050
color: transparent;
5151
font: 0/0 a;
5252
text-shadow: none;
5353
background-position: -10px -20px;
54-
background-image: url("../../test/cases/img/rider.png");
54+
background-image: url("img/rider.png");
5555
background-size: 136px 136px;
5656
background-repeat: no-repeat;
5757
}
5858
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
5959
.ir-2 {
60-
background-image: url("../../test/cases/img/rider@2x.png");
60+
background-image: url("img/rider@2x.png");
6161
}
6262
}
6363
.ir-3 {
6464
color: transparent;
6565
font: 0/0 a;
6666
text-shadow: none;
6767
background-position-y: -20px;
68-
background-image: url("../../test/cases/img/rider.png");
68+
background-image: url("img/rider.png");
6969
background-size: 136px 136px;
7070
background-repeat: no-repeat;
7171
}
7272
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
7373
.ir-3 {
74-
background-image: url("../../test/cases/img/rider@2x.png");
74+
background-image: url("img/rider@2x.png");
7575
}
7676
}
7777
.ir-4 {
7878
color: transparent;
7979
font: 0/0 a;
8080
text-shadow: none;
8181
background-position-x: -30px;
82-
background-image: url("../../test/cases/img/rider.png");
82+
background-image: url("img/rider.png");
8383
background-size: 136px 136px;
8484
background-repeat: no-repeat;
8585
}
8686
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
8787
.ir-4 {
88-
background-image: url("../../test/cases/img/rider@2x.png");
88+
background-image: url("img/rider@2x.png");
8989
}
9090
}
9191
.ir-5 {
9292
color: transparent;
9393
font: 0/0 a;
9494
text-shadow: none;
9595
background-position: 0 -30px;
96-
background-image: url("../../test/cases/img/rider.png");
96+
background-image: url("img/rider.png");
9797
background-size: 100px 200px;
9898
background-repeat: no-repeat;
9999
}
100100
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
101101
.ir-5 {
102-
background-image: url("../../test/cases/img/rider@2x.png");
102+
background-image: url("img/rider@2x.png");
103103
}
104104
}
105105
.ir-6 {
106106
color: transparent;
107107
font: 0/0 a;
108108
text-shadow: none;
109109
background-position: 0;
110-
background-image: url("../../test/cases/img/rider.png");
110+
background-image: url("img/rider.png");
111111
background-size: 100px 200px;
112112
background-repeat: no-repeat;
113113
}
114114
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
115115
.ir-6 {
116-
background-image: url("../../test/cases/img/rider@2x.png");
116+
background-image: url("img/rider@2x.png");
117117
}
118118
}
119+
.bg2x-1 {
120+
background-image: url("img/logo.png");
121+
background-size: 75px 44px;
122+
background-repeat: no-repeat;
123+
}
124+
.bg2x-2 {
125+
background-image: url("img/logo.png");
126+
background-size: 10px 44px;
127+
background-repeat: no-repeat;
128+
}
129+
.bg2x-3 {
130+
background-image: url("img/logo.png");
131+
background-size: 10px 5px;
132+
background-repeat: no-repeat;
133+
}
134+
.bg2x-4 {
135+
background-image: url("img/rider@2x.png");
136+
background-size: 136px 136px;
137+
background-repeat: no-repeat;
138+
}
139+
.bg3x-1 {
140+
background-image: url("img/logo.png");
141+
background-size: 50px 29px;
142+
background-repeat: no-repeat;
143+
}
144+
.bg-dppx-1 {
145+
background-image: url("img/logo.png");
146+
background-size: 75px 44px;
147+
background-repeat: no-repeat;
148+
}
149+
.bg-dppx-2 {
150+
background-image: url("img/logo.png");
151+
background-size: 37px 22px;
152+
background-repeat: no-repeat;
153+
}

‎test/cases/image.styl

+27-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
11
.bg-1
2-
bg: '../../test/cases/img/logo.png'
2+
bg: 'img/logo.png'
33
.bg-2
4-
bg: '../../test/cases/img/rider.png'
4+
bg: 'img/rider.png'
55
.bg-3
6-
bg: '../../test/cases/img/rider.png', 20px, 30px
6+
bg: 'img/rider.png', 20px, 30px
77
.bg-4
8-
bg: '../../test/cases/img/rider.png', 20px
8+
bg: 'img/rider.png', 20px
99

1010
.ir-1
11-
ir: '../../test/cases/img/rider.png'
11+
ir: 'img/rider.png'
1212
.ir-2
13-
ir: '../../test/cases/img/rider.png', -10px, -20px
13+
ir: 'img/rider.png', -10px, -20px
1414
.ir-3
15-
ir: '../../test/cases/img/rider.png', null, -20px
15+
ir: 'img/rider.png', null, -20px
1616
.ir-4
17-
ir: '../../test/cases/img/rider.png', -30px
17+
ir: 'img/rider.png', -30px
1818
.ir-5
19-
ir: '../../test/cases/img/rider.png', 0, -30px, 100px, 200px
19+
ir: 'img/rider.png', 0, -30px, 100px, 200px
2020
.ir-6
21-
ir: '../../test/cases/img/rider.png', 0, 0, 100px, 200px
21+
ir: 'img/rider.png', 0, 0, 100px, 200px
22+
23+
.bg2x-1
24+
bg2x: 'img/logo.png'
25+
.bg2x-2
26+
bg2x: 'img/logo.png', 10px
27+
.bg2x-3
28+
bg2x: 'img/logo.png', 10px, 5px
29+
.bg2x-4
30+
bg2x: 'img/rider@2x.png'
31+
32+
.bg3x-1
33+
bg3x: 'img/logo.png'
34+
35+
.bg-dppx-1
36+
bg-dppx: 2 'img/logo.png'
37+
.bg-dppx-2
38+
bg-dppx: 4 'img/logo.png'

0 commit comments

Comments
 (0)
Failed to load comments.