怎么用CSS来布局多个背景的网页?

html-css015

怎么用CSS来布局多个背景的网页?,第1张

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%

在一个div里面设置两张背景图片用css3的多背景可以做到,写法也很容易,类似下面这样就行了:

background:url(top.jpg) center top no-repeat,

url(bottom.jpg) center bottom no-repeat

不过因为不同浏览器对于CSS3的支持度有限,这种写法在大多数浏览器里面,特别是IE里面是无效的。所以通常的作法还是嵌套两个div,一个div里面是上面的背景图,一个div里面是下面的背景图,这样的兼容性会好一些。