当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

PHPWEB网站大背景(按比例缩放背景图片)

发表:管理员  发表时间:2017-02-12 20:15:50   阅读:(4036)次  

很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法。
1.帅气简单的CSS3方法

  1. html {

  2. background: url(images/bg.jpg) no-repeat center center fixed;

  3. -webkit-background-size: cover;

  4. -moz-background-size: cover;

  5. -o-background-size: cover;

  6. background-size: cover;

  7. }

复制代码

  • Safari 3+

  • Chrome Whatever+

  • IE 9+

  • Opera 10+

  • Firefox 3.6+


2.只使用CSS之方法一

  1. img.bg {

  2. min-height: 100%;

  3. min-width: 1024px;

  4. width: 100%;

  5. height: auto;

  6. position: fixed;

  7. top: 0;

  8. left: 0;

  9. }

  10. @media screen and (max-width: 1024px) {

  11. img.bg {

  12. left: 50%;

  13. margin-left: -512px;

  14. }

  15. }

复制代码

  • 以下浏览器的任何版本: Safari / Chrome / Opera / Firefox

  • IE 6: (各种方案奈我何?!)

  • IE 7/8: 大部分工作,小屏幕的时候全屏,但是不是居中

  • IE 9: 没问题


3.只使用CSS之方法二

  1. 复制代码

  2. #bg {

  3. position:fixed;

  4. top:-50%;

  5. left:-50%;

  6. width:200%;

  7. height:200%;

  8. }

  9. #bg img {

  10. position:absolute;

  11. top:0;

  12. left:0;

  13. right:0;

  14. bottom:0;

  15. margin:auto;

  16. min-width:50%;

  17. min-height:50%;

  18. }

复制代码

  • Safari / Chrome / Firefox

  • IE 8+

  • Opera


4.jQuery方法

复制代码

  1. #bg { position: fixed; top: 0; left: 0; }

  2. .bgwidth { width: 100%; }

  3. .bgheight { height: 100%; }

复制代码

  1. $(window).load(function() {

  2. var theWindow = $(window),

  3. $bg = $("#bg"),

  4. aspectRatio = $bg.width()/$bg.height();

  5. function resizeBg() {

  6. if ( (theWindow.width()/theWindow.height()) $bg

  7. .removeClass()

  8. .addClass('bgheight');

  9. }else{

  10. $bg

  11. .removeClass()

  12. .addClass('bgwidth');

  13. }

  14. }

  15. theWindow.resize(function() {

  16. resizeBg();

  17. }).trigger("resize");

  18. });

复制代码

  • IE7+

  • 任何除了IE的浏览器的任何版本

 

假如我们资讯/文章对您有所帮助,您可以通过扫描捐赠二维码支持一下我们~

感谢您对我们的支持,您的小小支持让我们有信心走得更远!

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证