如何设置网页背景图片自适应屏幕宽度

显示全部楼层 · 2016-9-27 12:17:10

比如说，我的屏幕尺寸是1375px,而我做的网页背景图是1024px,当我用body { background: #000000 url(images/body-bg.gif) top center no-repeat; font:12px Arial, Helvetica, sans-serif;}来定义了背景图片之后，就会出现，图片在页面中间，但是两边却有很大的白色空白，但是，我设的背景颜色是黑色啊，就算是图片不会自适应宽度，两边的空白怎么会是白色呢？因为显示器的宽度都不一样，我想让背景图自动变得跟显示器一样宽，不会有空白，该怎么设呢？这两个问题好纠结哦……初学者皮毛都不太熟，希望哪位大侠能帮帮我，不胜感激！跪谢！

千问 · 2016-9-27 12:17:10

可以先用js获取页面窗口大小，然后再调用不同的背景css样式就看具体需求了，或者说是对背景的理解上几年前做过类似的应用，思路跟这差不多。1.将body归零，margin,padding,overflow等2.设定一个引入背景src (根据实际需要静态或者动态设定尺寸)3.建立一个div作为新的内容容器，以替代body最后根据需要，写一段JS，随意更改拉伸、平铺、居中等模拟桌面效果，以及替换背景图片或者颜色，配合其他皮肤样式的切换以及用户自定义桌面，效果更佳

千问 · 2016-9-27 12:17:10

给网页插入背景图片，并且是图片合适网页大小body{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="简历背景.jpg",sizingMethod="scale") }