我希望能够根据用户使用的屏幕分辨率更改网页的背景图像，因此：
如果屏幕分辨率大于或等于1200*600，则背景为mybackground.jpg no-repeat，否则怎么做？
根据屏幕分辨率设置背景图片
26
- prakasam
2
1你是什么意思？你是指 '否则背景 = myalternatebackground.jpg no-repeat' 吗？请提供更多上下文信息。 - Sam Holder
CSS3中的媒体查询 - Post Self
7个回答
23
讨论了一些非常有效的纯CSS方法，可以在这里找到更多信息。特别地，检查了两种技术，我个人更喜欢第二种，因为它不依赖于CSS3，这更符合我的需求。
如果您的大部分/全部流量都使用支持CSS3的浏览器，则第一种方法更快速和简洁，容易实现（Mr. Zoidberg在另一个答案中复制/粘贴了此方法以方便，但我建议访问源站以了解其工作原理）。
除CSS外，另一种方法是使用JavaScript库jQuery来检测分辨率变化并相应地调整图像大小。 这篇文章介绍了jQuery技术并提供了实时演示。
Supersized是专门为静态全屏图像以及全尺寸幻灯片设计的JavaScript库。
对于全屏图像的一个好提示是预先按正确的比例进行缩放。当使用supersized.js时，我通常针对1500x1000的尺寸或其他方法的1680x1050设置照片的jpg质量在60-80％之间，以获得文件大小约为100kb或更小（如果可能）而不会过度损失质量。
- Kynth
15
删除您的“body背景图片代码”，然后粘贴此代码：
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;
}
- Mr. Zoidberg
4
你好，这里是一个JavaScript版本的代码，它根据屏幕分辨率更改背景图片的src。你需要将不同大小的图片保存在正确的尺寸中。
<html>
<head>
<title>Javascript Change Div Background Image</title>
<style type="text/css">
body {
margin:0;
width:100%;
height:100%;
}
#div1 {
background-image:url('sky.jpg');
width:100%
height:100%
}
p {
font-family:Verdana;
font-weight:bold;
font-size:11px;
}
</style>
<script language="javascript" type="text/javascript">
function changeDivImage()
{
//change the image path to a string
var imgPath = new String();
imgPath = document.getElementById("div1").style.backgroundImage;
//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;
//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
{
document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
}
else if (custWidth <= 800)
{
document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
}
else if (custWidth <= 1024)
{
document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
}
else if (custWidth <= 1280)
{
document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
}
else if (custWidth <= 1600)
{
document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
}
else {
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
/*if(imgPath == "url(sky.jpg)" || imgPath == "")
{
document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
}
else
{
document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";
}*/
}
</script>
</head>
<body onload="changeDivImage()">
<div id="div1">
<p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>
<p>paragraph</p>
</div>
<br/>
</body>
</html>
- grace-bob
3
我知道这是一个很老的问题，但是我想回答一下，这可能会对某些人有帮助。如果你看到 Twitter，你会发现一些非常巧妙但纯 CSS 的方法来实现这个效果。
<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
background: none repeat scroll 0 0 #FFFFFF;
height: 200%;
left: -50%;
position: fixed;
width: 200%;}
.background img{
bottom: 0;
display: block;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
right: 0;
top: 0;}
这个背景图片可以适应所有尺寸，即使是 iPad 竖屏视图也是如此。它总是将图片调整到中心位置。如果您缩小页面，图片仍然保持不变。
- bhupen
1
将body的CSS设置为：
body {
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;
}
- havefun
0
我曾经遇到过同样的问题，但现在已经找到了解决方法。
诀窍是创建一个1920*1200的壁纸图像。当你将这个壁纸应用到不同的机器上时，Windows 7会自动调整大小以获得最佳适配效果。
希望这能帮助到大家。
- Dave Walker
0
将它放进 CSS 文件中：
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
URL images/bg.jpg 是你的背景图片
- FMOYOTA
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接