关于html：六边形的响应网格

Responsive grid of hexagons

我从互联网上在网站上加载了多张图片。是否可以在响应网格中为所有这些图像提供六边形形状？

1
2
3
4
5
6
7

<img src="link" class="Image">

<img src="link" class="Image">

...

我找到了多种方法来执行此操作，但是您需要在CSS代码中填写图像src。
这对我来说是不可能的，因为该网站使用jQuery从互联网上加载了随机图像，因此我无法使用背景图像。

我尝试了这个：http://jsfiddle.net/8f5m5wv0/

相关讨论

这是六边形响应网格的演示和存储库。
这里的代码未维护。它已移至github并进行了改进，因此应在此处进行评论，问题报告和贡献。

Responsive grid of hexagons

此技术使用：

标记
无序列表：每个六角形包含在
标签和标签中
变换旋转和倾斜以制作六边形
overflow:hidden;
nth-child()以规则图案隔开六边形

以及使用标签创建六边形网格的更多方法。

六角格特点：

网格是响应性的，因为它依赖于百分比宽度。六边形通过底部填充技术保持其纵横比，并且图像会调整大小以适合六边形形状。
六边形上的悬停效果：文本在图像上以透明覆盖层的形式滑入。
每个六边形都保持其边界：仅在实际形状内触发的每个六边形的悬停效果(或单击事件)。

完整代码

以下代码段不是网格的最新版本。 GitHub存储库已维护且是最新的。问题和贡献可以在那里进行。

* {
margin: 0;
padding: 0;
}

body {
font-family: 'Open Sans', arial, sans-serif;
background: rgb(123, 158, 158);
}

#hexGrid {
overflow: hidden;
width: 90%;
margin: 0 auto;
padding:0.707% 0;
}

#hexGrid:after {
content:"";
display: block;
clear: both;
}

.hex {
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}

.hex * {
position: absolute;
visibility: visible;
}

.hexIn {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

/* HEX CONTENT */

.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}

.hex h1, .hex p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 128, 128, 0.8);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}

.hex h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1.5em;
padding-top: 100%;
padding-bottom: 100%;
}

.hex h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}

.hex p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}

/* HOVER EFFECT */

.hexIn:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}

.hexIn:hover p {
top: 50%;
padding-top: 10%;
}

/* SPACING AND SIZING */

@media (min-width:1201px) {
.hex {
width: 19.2%; /* = (100-4) / 5 */
padding-bottom: 22.170%; /* = width / sin(60deg) */
}
.hex:nth-child(9n+6),
.hex:nth-child(9n+7),
.hex:nth-child(9n+8),
.hex:nth-child(9n+9) {
margin-top: -4.676%;
margin-bottom: -4.676%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(9n+6):last-child,
.hex:nth-child(9n+7):last-child,
.hex:nth-child(9n+8):last-child,
.hex:nth-child(9n+9):last-child {
margin-bottom: 0;
}
.hex:nth-child(9n+6) {
margin-left: 0.5%;
clear: left;
}
.hex:nth-child(9n+10) {
clear: left;
}
.hex:nth-child(9n+2),
.hex:nth-child(9n+ 7) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(9n+3),
.hex:nth-child(9n+4),
.hex:nth-child(9n+8) {
margin-right: 1%;
}
}

@media (max-width: 1200px) and (min-width:901px) {
.hex {
width: 24.25%; /* = (100-3) / 4 */
padding-bottom: 28.001%; /* = width / sin(60deg) */
}
.hex:nth-child(7n+5),
.hex:nth-child(7n+6),
.hex:nth-child(7n+7) {
margin-top: -6.134%;
margin-bottom: -6.134%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(7n+5):last-child,
.hex:nth-child(7n+6):last-child,
.hex:nth-child(7n+7):last-child {
margin-bottom: 0;
}
.hex:nth-child(7n+2),
.hex:nth-child(7n+6) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(7n+3) {
margin-right: 1%;
}
.hex:nth-child(7n+8) {
clear: left;
}
.hex:nth-child(7n+5) {
clear: left;
margin-left: 0.5%;
}
}

@media (max-width: 900px) and (min-width:601px) {
.hex {
width: 32.666%; /* = (100-2) / 3 */
padding-bottom: 37.720%; /* = width / sin(60) */
}
.hex:nth-child(5n+4),
.hex:nth-child(5n+5) {
margin-top: -8.564%;
margin-bottom: -8.564%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(5n+4):last-child,
.hex:nth-child(5n+5):last-child {
margin-bottom: 0;
}
.hex:nth-child(5n+4) {
margin-right: 1%;
margin-left: 0.5%;
}
.hex:nth-child(5n+2) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(5n+6) {
clear: left;
}
}

@media (max-width: 600px) {
.hex {
width: 49.5%; /* = (100-1) / 2 */
padding-bottom: 57.158%; /* = width / sin(60) */
}
.hex:nth-child(3n+3) {
margin-top: -13.423%;
margin-bottom: -13.423%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(3n+3):last-child {
margin-bottom: 0;
}
.hex:nth-child(3n+3) {
margin-left: 0.5%;
}
.hex:nth-child(3n+2) {
margin-left: 1%;
}
.hex:nth-child(3n+4) {
clear: left;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490

更改每行六边形的数量

网格根据视口的宽度调整每行六边形的数量，从大于1200px的屏幕上的5到小于600px的屏幕上的2。

如果您不需要媒体查询，而只想更改每行六边形的数量，则可以将CSS保留在相应的媒体查询中，并删除不需要的CSS。

有关更多的自定义，请参见六边形的大小和间距。

演示版

有关所有演示的列表，请参见此Codepen集合：六边形的响应网格，每行具有不同数量的六边形，居中选项等等。

这是带有.pusher元素的原始codepen演示，用于制作不规则的六边形网格。 .pusher元素用于在具有空六边形的网格中制作"孔"。

相关讨论

好了，这是一个干净的，跨浏览器兼容的解决方案，甚至可以让您蜂窝六边形：

为此，您需要将每个图像包装在2个容器中，因为一个将用于左上/右下边界，另一个用于右上/左下边界。

1	<img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />

然后，CSS为每个剪切容器提供一个skew，用于向图像添加角度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.outerclip {
-webkit-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-transform: skew(-30deg);
overflow: hidden;
display: inline-block;
}
.innerclip {
-webkit-transform: skew(50deg);
-ms-transform: skew(50deg);
transform: skew(50deg);
overflow: hidden;
display: inline-block;
}
img {
-webkit-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg);
}

演示：http：//jsfiddle.net/XkQtF/3/

注意：为提高渲染质量，建议将.outerclip和.innerclip设置为相同的固定高度。

要获取蜂窝，可以将几个图像放入row容器中，然后将每个奇数行偏移几个像素，如下所示：

Honeycombs

演示：http：//jsfiddle.net/XkQtF/4/

相关讨论

如果是蜂窝的话
bee nest css
这是一个CSS可能性。
http://codepen.io/gc-nomade/pen/eyntg/

1
2
3
4

<img src="http://lorempixel.com/200/200/food/1"/>

您可以在% +伪元素中使用vertical-padding绘制一个正方形。

然后，使用第二个元素绘制蒙版。

演示
CSS pseudo hexagon

的HTML

1	<img src="image100x120">

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.hex {
position:relative;
margin:auto;
text-align:center;
overflow:hidden;
white-space:nowrap;
display:table;
}
.hex:before {
content:'';
padding-top:120%;
display:inline-block;
vertical-align:middle;
}

.hex:after {
content:'';
position:absolute;
top:0%;
left:-10%;
width:120%;
padding-top:120%;
transform: rotatex(45deg) rotate(45deg);
text-align:center;
box-shadow:0 0 0 200px white;;
}
.hex img {
display:inline-block;
vertical-align:middle;
margin:0 -10px;
}

相关讨论

签出使用AngularJS实现的此响应式六边形网格。

enter image description here

的HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

CSS：六角形网格

.hex-grid {
position: relative;
width: 80%;
left: 10%;
padding-top: 120px;
}
@media (max-width: 767px) {
.hex-grid {
width: 100%;
left: 0;
}
}
.hex-grid .grid-item {
position: relative;
display: inline-block;
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
@media (max-width: 633px) {
.hex-grid .grid-item {
width: 222%;
margin: 0 -61%;
margin-bottom: 10px;
}
}
@media (min-width: 634px) and (max-width: 1022px) {
.hex-grid .grid-item {
width: 133%;
margin: 0 -42%;
margin-bottom: -25%;
}
.hex-grid .grid-item:nth-child(2),
.hex-grid .grid-item:nth-child(4),
.hex-grid .grid-item:nth-child(6),
.hex-grid .grid-item:nth-child(8),
.hex-grid .grid-item:nth-child(10),
.hex-grid .grid-item:nth-child(12),
.hex-grid .grid-item:nth-child(14),
.hex-grid .grid-item:nth-child(16),
.hex-grid .grid-item:nth-child(18),
.hex-grid .grid-item:nth-child(20),
.hex-grid .grid-item:nth-child(22),
.hex-grid .grid-item:nth-child(24),
.hex-grid .grid-item:nth-child(26),
.hex-grid .grid-item:nth-child(28),
.hex-grid .grid-item:nth-child(30) {
margin-top: 28%;
}
.hex-grid .grid-item:nth-child(3),
.hex-grid .grid-item:nth-child(5),
.hex-grid .grid-item:nth-child(7),
.hex-grid .grid-item:nth-child(9),
.hex-grid .grid-item:nth-child(11),
.hex-grid .grid-item:nth-child(13),
.hex-grid .grid-item:nth-child(15),
.hex-grid .grid-item:nth-child(17),
.hex-grid .grid-item:nth-child(19),
.hex-grid .grid-item:nth-child(21),
.hex-grid .grid-item:nth-child(23),
.hex-grid .grid-item:nth-child(25),
.hex-grid .grid-item:nth-child(27),
.hex-grid .grid-item:nth-child(29) {
clear: left;
}
}
@media (min-width: 1023px) and (max-width: 1599px) {
.hex-grid .grid-item {
width: 91.6%;
margin: 0 -29.2%;
margin-bottom: -17.5%;
}
.hex-grid .grid-item:nth-child(2),
.hex-grid .grid-item:nth-child(5),
.hex-grid .grid-item:nth-child(8),
.hex-grid .grid-item:nth-child(11),
.hex-grid .grid-item:nth-child(14),
.hex-grid .grid-item:nth-child(17),
.hex-grid .grid-item:nth-child(20),
.hex-grid .grid-item:nth-child(23),
.hex-grid .grid-item:nth-child(26),
.hex-grid .grid-item:nth-child(29) {
margin-top: 19%;
}
.hex-grid .grid-item:nth-child(4),
.hex-grid .grid-item:nth-child(7),
.hex-grid .grid-item:nth-child(10),
.hex-grid .grid-item:nth-child(13),
.hex-grid .grid-item:nth-child(16),
.hex-grid .grid-item:nth-child(19),
.hex-grid .grid-item:nth-child(22),
.hex-grid .grid-item:nth-child(25),
.hex-grid .grid-item:nth-child(28) {
clear: left;
}
}
@media (min-width: 1600px) {
.hex-grid .grid-item {
width: 66.7%;
margin: 0 -20.9%;
margin-bottom: -12.5%;
}
.hex-grid .grid-item:nth-child(2),
.hex-grid .grid-item:nth-child(4),
.hex-grid .grid-item:nth-child(6),
.hex-grid .grid-item:nth-child(8),
.hex-grid .grid-item:nth-child(10),
.hex-grid .grid-item:nth-child(12),
.hex-grid .grid-item:nth-child(14),
.hex-grid .grid-item:nth-child(16),
.hex-grid .grid-item:nth-child(18),
.hex-grid .grid-item:nth-child(20),
.hex-grid .grid-item:nth-child(22),
.hex-grid .grid-item:nth-child(24),
.hex-grid .grid-item:nth-child(26),
.hex-grid .grid-item:nth-child(28),
.hex-grid .grid-item:nth-child(30) {
margin-top: 14%;
}
.hex-grid .grid-item:nth-child(5),
.hex-grid .grid-item:nth-child(9),
.hex-grid .grid-item:nth-child(13),
.hex-grid .grid-item:nth-child(17),
.hex-grid .grid-item:nth-child(21),
.hex-grid .grid-item:nth-child(25),
.hex-grid .grid-item:nth-child(29) {
clear: left;
}
}
.hex-grid .grid-item .inner {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hex-grid .grid-item .inner .inner-inner {
-webkit-transform-style: preserve-3d;
/* Chrome, Safari, Opera */
transform-style: preserve-3d;
visibility: visible;
overflow: hidden;
width: 100%;
padding-bottom: 40%;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
background-repeat: no-repeat;
background-size: 50%;
-webkit-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
background-position: 50%;
}
@media (min-width: 1100px) {
.hex-grid .grid-item .inner .inner-inner {
padding-bottom: 40%;
}
}
.hex-grid .grid-item .inner .inner-inner:hover {
background-size: 60%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
padding: 10%;
background: #ffffff;
color: #000000;
text-decoration: none;
text-align: center;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hex-grid .grid-item .inner .inner-inner .grid-info:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text {
display: table;
position: relative;
height: 100%;
width: 46%;
left: 27%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text .inner-text-inner {
display: table-cell;
vertical-align: middle;
}
.hex-grid .grid-item .inner .inner-inner {
-webkit-backface-visibility: hidden;
}

CSS：动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
/* 100ms will be applied between each sucessive enter operation */
-moz-transition-delay: 0.1s !important;
-webkit-transition-delay: 0.1s !important;
transition-delay: 0.1s !important;

/* this is here to avoid accidental CSS inheritance */
-webkit-transition-duration: 0 !important;
transition-duration: 0 !important;
}

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
-moz-transition: 0.2s ease-in-out all;
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;
}

.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
-moz-transition: 0.2s ease-in-out all;
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;

opacity:0;
}

.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
opacity:1;
}

AngularJS

1
2
3
4
5
6
7
8
9

'use strict';
(function() {
/**
* Declares the app module.
*/
angular
.module( 'app', [ 'ngAnimate' ] );

//...

原文：http：//rachidmrad.com/

所有的功劳归功于Rachid Mrad先生，他是一位了不起的网页设计师。

https://github.com/mnishiguchi/hexagonal_grid

相关讨论

演示版

HTML：

SASS(使用指南针)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$width: 400px;
$fillColor: #CCC;
$height: $width*sin(60deg);
.hexagon {
display: inline-block;
position: relative;
width: $width;
}
.hexagon:before, .hexagon:after {
content: '';
display: block;
width: 50%;
border: 0 solid transparent;
}
.hexagon:before {
border-bottom-color: $fillColor;
border-width: 0 $width/4 $height/2;
}
.hexagon:after {
border-top-color: $fillColor;
border-width: $height/2 $width/4 0;
}
.hexagon > .contents {
position: absolute;
top: 0; bottom: 0;
left: 25%; right: 25%;
}

然后，如果要将图像放置在六边形中，请在.contents内使用

1	<img id="myimg" src="foo" />

并例如将其设置为如下样式：

1
2
3
4
5
6
7

#myimg {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 50%;
}

相关讨论

您可以创建具有透明六边形形状的图像，并将其叠加在注入的图像上。

HTML：

1
2
3
4
5

<img src="injected.jpg" />


<img src="transparentHex.png" />

CSS：

1
2
3
4
5
6
7

.hexagon {
position: relative;
}

.hexagon > img {
position: absolute;
}

演示：http://jsfiddle.net/dr6Hp/3/

相关讨论

试试这个

http://jsfiddle.net/ku860uoh/

的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

BODY {
background: url(http://placekitten.com/600/600);
}
.hex {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.images1{
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.images2{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://placekitten.com/238/240);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.images2:hover {
background-image: url(http://placekitten.com/440/242);
}

.one {
width: 400px;
height: 200px;
margin: 0 0 0 -80px;
}
.two {
width: 200px;
height: 400px;
margin: -80px 0 0 20px;
}

而不是在img标签中使用类，而在容器img中使用css就像

1	.container img{ your code}

它将为您省去在图像中上课的麻烦

相关讨论