[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
本站文章未经文下加注授权不得拷贝发布。
[…] 最近的一篇文章主题【3】的背景坎坷里写到了背景图片的background-size: cover这个css对移动设备并不怎么友好,无法达到标准的显示效果,于是我一直在想办法使用img标签来填补这个bug,不过今天我又不想做了,所以找了个理由。[接下来就是理由] […]