单页面的网站 怎么样才能使第一页背景图片 自适应浏览器分辨率 达到满屏显示的效果呢?
zjgsamuel · 2014-01-01 14:49:28 +08:00 · 7288 次点击这是一个创建于 3977 天前的主题，其中的信息可能已经有所发展或是发生改变。
我一开始的想法很简单
用 jquery 判断一下 然后重置一下css 不就可以了?
header {
width: 100%;
height: 700px;
position: absolute;
overflow: hidden;
text-align: center;
color: #fff;
background: #333 url(../img/header.jpg) no-repeat top center fixed;
background-size: 1280px;
}
$(document).ready(function() {
var newheight = $(window).height() ;
$("header").css("height",newheight);
$(".header-bg").css("height",newheight);
$(".pattern").css("height",newheight);
});
在家里测试没有问题 但是跑到单位测试发现 背景图片没有变化，同样的浏览器，只不过是分辨率不同，我把css 的background no-repeat 取消发现 有了重复的图片
我在想是不是我用的图片分辨率不够 达不到要求的高度那 ，于是拿了了张分辨率 足够大的图片试了一下，结果图像还是智能显示到原先的高度....
我就困惑了 以上 pattern header-bg 2个层都属于 header 的为什么 pattern 这个用来蒙版的背景图片可以实现满屏显示 而 header-bg 这个背景无法显示呢?
用 jquery 判断一下 然后重置一下css 不就可以了?
header {
width: 100%;
height: 700px;
position: absolute;
overflow: hidden;
text-align: center;
color: #fff;
background: #333 url(../img/header.jpg) no-repeat top center fixed;
background-size: 1280px;
}
$(document).ready(function() {
var newheight = $(window).height() ;
$("header").css("height",newheight);
$(".header-bg").css("height",newheight);
$(".pattern").css("height",newheight);
});
在家里测试没有问题 但是跑到单位测试发现 背景图片没有变化，同样的浏览器，只不过是分辨率不同，我把css 的background no-repeat 取消发现 有了重复的图片
我在想是不是我用的图片分辨率不够 达不到要求的高度那 ，于是拿了了张分辨率 足够大的图片试了一下，结果图像还是智能显示到原先的高度....
我就困惑了 以上 pattern header-bg 2个层都属于 header 的为什么 pattern 这个用来蒙版的背景图片可以实现满屏显示 而 header-bg 这个背景无法显示呢?
 |
1
summic 2014-01-01 14:53:23 +08:00
Google 找不到答案，一定是你提问的方式不对
|
 |
2
jasonchao 2014-01-01 14:58:45 +08:00
background-size: cover;
|
 |
3
zjgsamuel OP @summic 恩 是的 我真的找了好久了 .... 就想实现类似 http://www.creatance.net/ 这样的网站那
@jasonchao 后来我改成了 cover; 貌似也是不行那~~ |
 |
4
ttym7993 2014-01-01 15:22:29 +08:00
谷歌：jquery superbgimage
|
 |
5
haiyon 2014-01-01 15:54:46 +08:00  1
写了个简单demo，请自行查阅代码 http://cstheme.com/backgroud-cover.html
|
 |
6
chairuosen 2014-01-01 16:06:09 +08:00
我想的是，第一屏的div background-size:100%然后js控制高度
|
|
7
zjgsamuel OP |
 |
8
XadillaX 2014-01-01 23:26:40 +08:00
`jquery.backstretch.min.js`
我叫雷锋。 |
|
9
XadillaX 2014-01-01 23:27:18 +08:00
咦-。 - V2EX不是markdown的啊
|
Select Language