swiper3滑屏插件!
原理是利用最大层百分百固定一个框!
然后里面用transform: translate3d(0px, -0, 0px)来进行滑动!
具体每个背景图的使用则是把每一个层都是百分百的宽高!
然后背景图
background-image:url()background-repeat: no-repeat
background-position: bottom right
//核心区分点
//让背景比例不变
background-size: cover
//让背景充满屏幕
background-size: 100% 100%
//或者让背景宽度100% 高度自动
background-size: 100% auto
//让背景高度100% 宽度自动
background-size: auto 100%
两个办法:1.css3支持多层背景,自己百度下,缺点是ie低版本和其他一些内核比较老的浏览器不支持
2.body上一个背景,然后放个div,这个div上再用个背景
另外低版本ie不支持png24位的透明通道,透明色将显示为一片灰色,你需要另外弄个js来修正;
方法1、2自己根据需要权衡..
css3可以实现,
background: url(image_1.jpg) top left no-repeat, url(image_2.jpg) top right no-repeat
在这个背景里面加两个div
样式为都float:left:width:50%height:100%
然后把图片分别放到两个中,(最常用)