所以我正在编制一个网站,并将body bg图像设置为background-image:cover。它工作正常,但有一个问题。我的背景图像是1138像素×825像素,如果浏览器窗口小于1138像素×825像素,我希望它保持这些尺寸。我希望图像像普通的背景图像一样,而不是缩小。当浏览器打开大于1138px×825px时,我希望css封面功能可以启动。我尝试过应用min-height / min-width和height / width但是没有优先权。任何想法或解决方案?非常感谢提前。网站和CSS代码如下。
网站:test.baysidemarket.com
CSS代码:
#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 1000px;
height: 725px;
}
HTML:
<body id="home">
</body>
答案 0 :(得分:1)
在css中执行此操作的唯一方法是使用
@media (min-width: 1138px) and (min-height: 828px){
// your code for larger display
}
答案 1 :(得分:0)
我没有对此进行测试,但这在逻辑上应该有效:
'use strict';
$(document).ready(function(){
var body_w = $('body').css('width').replace('px', '') * 1;
var body_h = $('body').css('height').replace('px', '') * 1;
console.log(body_w + 'x' + body_h);
// Initial check
if (body_w > 1138 && body_h > 825) {
$('body').css({
'-webkit-background-size' : 'cover',
'-moz-background-size' : 'cover',
'-o-background-size' : 'cover'
'background-size' : 'cover'
});
}
$(window).resize(function(){
var body_w = $('body').css('width').replace('px', '') * 1;
var body_h = $('body').css('height').replace('px', '') * 1;
if (body_w > 1138 && body_h > 825) {
$('body').css({
'-webkit-background-size' : 'cover',
'-moz-background-size' : 'cover',
'-o-background-size' : 'cover'
'background-size' : 'cover'
});
}
else {
$('body').css({
'-webkit-background-size' : 'auto',
'-moz-background-size' : 'auto',
'-o-background-size' : 'auto'
'background-size' : 'auto'
});
}
});
});
初步检查是否应该使用cover
并在窗口调整大小时再次检查。
不要忘记删除初始的CSS background-size
,因为它不再需要了。
#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
width: 1000px;
height: 725px;
}
注意:如果可能,尝试升级您的jQuery。我看到你使用1.7.2,尝试使用1.9.x