当前位置： 文江博客话题详情

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

发布于 2024-09-07 14:14:48 字数 109 浏览 6 评论 0原文

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

如果屏幕分辨率大于或等于 1200*600，则背景 = mybackground.jpg no-repeat 或其他。我该怎么做？

原文

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equal to 1200*600 then background = mybackground.jpg no-repeat or else. How can I do this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

且行且努力 2024-09-14 14:14:49

此处讨论了效果很好的纯 CSS 方法。特别研究了两种技术，我个人更喜欢第二种，因为它不依赖 CSS3，更适合我自己的需求。

如果您的大部分/所有流量都有支持 CSS3 的浏览器，则第一种方法实施起来更快、更干净（为方便起见，Zoidberg 先生在此处的另一个答案中复制/粘贴，尽管我会访问 来源 了解其工作原理的更多背景）。

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

Supersized 是一个专用的 JavaScript 库，专为静态全屏图像以及全尺寸幻灯片而设计。

对于全屏图像的一个好技巧是事先以正确的比例缩放它们。当使用 supersized.js 时，我通常的目标是 1500x1000 的大小，或者使用其他方法时的 1680x1050 的大小，将照片的 jpg 质量设置为 60-80% 之间，从而在不过多影响质量的情况下，将文件大小控制在 100kb 或更小。 。

Pure CSS approaches that work very well are discussed here. Two techniques are examined in particular and I personally prefer the second as it not CSS3 dependent, which suits my own needs better.

If most/all of your traffic has a CSS3 capable browser, the first method is quicker and cleaner to implement (copy/pasted by Mr. Zoidberg in another answer here for convenience, though I'd visit the source for further background on why it works).

An alternative method to CSS is to use the JavaScript library jQuery to detect resolution changes and adjust the image size accordingly. This article covers the jQuery technique and provides a live demo.

Supersized is a dedicated JavaScript library designed for static full screen images as well as full sized slideshows.

A good tip for full-screen images is to scale them with a correct ratio beforehand. I normally aim for a size of 1500x1000 when using supersized.js or 1680x1050 for other methods, setting the jpg quality for photographs to between 60-80% resulting in a file size in the region of 100kb or less if possible without compromising quality too much.

回复 原文
望笑 2024-09-14 14:14:49

删除“身体背景图像代码”，然后粘贴此代码：

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;
}

Delete your "body background image code" then paste this code:

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;
}
回复 原文
淡墨 2024-09-14 14:14:49

您好，这是一个 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>

Hi heres a javascript version which changes the background image src according to screen resolution. You have to have the different images saved in the right size.

<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>
回复 原文
梦归所梦 2024-09-14 14:14:49

我知道这是一个太老的问题，但我想回答一下，它可能会对某人有所帮助。如果你看 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的纵向视图。它总是在中心调整图像。如果你缩小；图像将保持不变。

I know it's too old question but thought to answer, it might will help someone. If you see twitter, you will find something very tricky but pure css approach to achieve this.

<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;}

This background images fits to all size. even portrait view of ipad. it always adjust the image in center. if you zoom out; image will remain the same.

回复 原文
灼痛 2024-09-14 14:14:49

将正文 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;

}

Set body css to :

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;

}

回复 原文
青衫儰鉨ミ守葔 2024-09-14 14:14:49

我也遇到过同样的问题，但现在找到了解决方案。

诀窍是创建1920*1200的壁纸图像。
然后，当您将此壁纸应用到不同的计算机时，Windows 7 会自动调整大小以使其最适合。

希望这对大家有帮助

I've had this same issue but have now found the resolution for it.

The trick is to create a wallpaper image of 1920*1200.
When you then apply this wallpaper to the different machines, Windows 7 automatically resizes for best fit.

Hope this helps you all

回复 原文
三人与歌 2024-09-14 14:14:49

放入 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 是您的背景图片

Put into css file:

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 is your background image

回复 原文
~没有更多了~

关于作者

迷乱花海

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文