css大图切割,CSS3 图片切分效果

CSS

语言：

CSSSCSS

确定

body {

background-color: #111;

}

.container {

width: 768px;

height: 600px;

background-color: #111;

margin: 20px auto;

}

.img {

width: 100%;

height: 100px;

margin: 0 auto;

}

.img.first {

background: url(http://c.fastcompany.net/multisite_files/fastcompany/imagecache/inline-xlarge/inline/2015/11/3053406-inline-1f-how-apple-is-giving-design-a-bad-name.gif) no-repeat 100% 15%;

}

.img.second-deter {

background: url(http://e.fastcompany.net/multisite_files/fastcompany/imagecache/inline-xlarge/inline/2015/11/3053406-inline-6-how-apple-is-giving-design-a-bad-name.jpg) no-repeat 40% 15%;

}

.img.third {

background: url(http://c.fastcompany.net/multisite_files/fastcompany/imagecache/inline-xlarge/inline/2015/11/3053406-inline-1f-how-apple-is-giving-design-a-bad-name.gif) no-repeat 100% 45%;

}

.img.fourth-deter {

background: url(http://e.fastcompany.net/multisite_files/fastcompany/imagecache/inline-xlarge/inline/2015/11/3053406-inline-6-how-apple-is-giving-design-a-bad-name.jpg) no-repeat 40% 50%;

}

.img.fifth {

background: url(http://c.fastcompany.net/multisite_files/fastcompany/imagecache/inline-xlarge/inline/2015/11/3053406-inline-1f-how-apple-is-giving-design-a-bad-name.gif) no-repeat 100% 75%;

}

.img.sixth-deter {

background: url(http://e.fastcompany.net/multisite_files/fastcompany/imagecache/inline-xlarge/inline/2015/11/3053406-inline-6-how-apple-is-giving-design-a-bad-name.jpg) no-repeat 40% 85%;

}