根据屏幕分辨率设置背景图像

Question

我希望能够根据用户使用的屏幕分辨率更改我的网页背景图像:

如果屏幕分辨率大于或等于1200*600,那么background = mybackground.jpg no-repeat or else.我怎样才能做到这一点？

Answer 1

这里讨论了非常好用的纯CSS方法.特别考察了两种技术,我个人更喜欢第二种,因为它不依赖于CSS3,它更适合我自己的需要.

如果您的大部分/全部流量都具有支持CSS3的浏览器,则第一种方法更快更清晰(由Zoidberg先生在另一个答案中复制/粘贴以方便使用,但我会访问该来源以获取有关其原因的更多背景信息)作品).

CSS的另一种方法是使用JavaScript库jQuery来检测分辨率变化并相应地调整图像大小.本文介绍了jQuery技术并提供了一个现场演示.

Supersized是一个专用的JavaScript库,专为静态全屏图像和全尺寸幻灯片设计.

全屏图像的一个很好的提示是事先用正确的比例缩放它们.当使用supersized.js或1680x1050用于其他方法时,我通常瞄准尺寸为1500x1000,将照片的jpg质量设置在60-80%之间,如果可能的话,文件大小在100kb或更小的范围内,而不会影响质量太多.

Answer 2

删除"身体背景图片代码",然后粘贴此代码:

html { 
    background: url(../img/background.jpg) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}