主题【3】的背景坎坷

[2013年2月17日更新]:此CSS在我的iPhone的浏览器上(chrome和safari)表现不同于电脑上的浏览器,它会使背景图片撑满整个page层(整个网页的大小而不是显示区的大小)。所以针对移动设备也许也需要进行js级的背景调整

正文:
在昨天还是前天记不清了,我终于做好了新主题【3】,最后在弄背景图片的时候废了很长时间。
一开始我以为css里没有可以控制背景图片大小的样式【css2里确实没有,但我忘了伟大的css3..】
于是乎我就用一个img标签来充当背景【曾经也有想用img做背景而被blackglory喷过。。。】,然后再用javascript控制img标签自适应大小[这里我做了很长时间,在获取元素的时候出了些问题,后来还是解决了]。

后来发现了css3里又可以控制背景图大小的样式了,我表情如这个

先说说要用css3实现图片填充背景该怎么做

background-image: url(图片地址);  /*加载背景图*/
background-size: cover;/*设置尺寸,这里是第一个重点,可以让浏览器把背景图铺满整个显示区*/
background-attachment: fixed;/*这里不是必须,但一般要用上面那功能的话也都会需要这个功能:把图片固定住不随滚动条滚动*/
background-position: center;/*这里是两个样式[background-position-x和background-position-y]的集合版,设置为center可以让背景图完全居中*/

接下来还是说说img的做法吧,毕竟花了这么长的时间才弄好的QAQ[这个方法现在用来兼容不支持css3的浏览器{到底可不可以兼容还没有测试过}]

先是一个div包一个img标签

 
 

现在已被注释处理了,低于IE9的版本[我也不清楚IE从哪个版本开始支持css3的,于是就大概IE9好了]才会使用这个img标签的背景
这段代码放在了body内第一位
这个img的id被我定义成backgroundimg。。,外面包围的div设置了固定定位[fixed]样式,而且没有宽高,在显示区正中间。
接着把这个img放在div里,初始就这么定位在了50%,50%的地方。接下来的工作全交给js来完成了。

这一句放在head里,同样也被区别注释了。用来载入兼容模式背景图。

里面放了这些东西

 /*加载背景图*/

    bgimgjopj.ready(function(e) {     //背景图这个标签被解析时
        bgimg = document.getElementById('backgroundimg');//一个背景图的对象
        bgimg.style.display = 'none';//先让它隐藏
        bgimg.src = bgsrc;//bgsrc是config.js中的变量[配置]
        bgimgjopj.load(function() {//图片载入时
            bgimg.realwidth = bgwidth;
            bgimg.realheight = bgheight;//拿到宽高[宽高也是config.js中的变量]
            bgimg.w_h = bgimg.realwidth / bgimg.realheight;//计算宽高比
            bgimg.style.display = 'block';//这个其实不该放在这里的,应在最后才出现,但是由于那什么就懒得改了

            resetbgimg();//运行重设背景图函数
        });

        $(window).resize(function() {//窗口变动时
            windowwidth = window.innerWidth;
            windowheight = window.innerHeight;//得到窗口宽高
            resetbgimg();//运行重设背景图函数
        });

        function resetbgimg() {//重设背景图函数
            /*重设背景图*/
            var winw_h = windowwidth / windowheight;//计算窗口宽高比
            if (winw_h > bgimg.w_h) {//窗口宽高比大于图片宽高比时(这时情况是图片左右撑满,上下溢出窗口外)
                bgimgjopj.height('auto');
                bgimgjopj.width(windowwidth);

            } else {//窗口宽高比小于等于图片宽高比时(这时情况是图片上下撑满,左右溢出窗口外)
                bgimgjopj.width('auto');
                bgimgjopj.height(windowheight);
            }
            bgimgjopj.css({//让图片居中
                "margin-left": (bgimg.offsetWidth / -2),
                "margin-top": (bgimg.offsetHeight / -2)
            });
        }
    });

这样就可以让图片永远撑满窗口而且尽量显示全了。

实在不知该写什么了,这篇完结。



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。