Fatal编程技术网
  • image/
  • Image 根据屏幕分辨率设置背景图像

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

image

Image 根据屏幕分辨率设置背景图像,image,background,screen,resolution,Image,Background,Screen,Resolution,我希望能够根据用户使用的屏幕分辨率更改我的网页背景图像，以便： 如果屏幕分辨率大于或等于1200*600，则background=mybackground.jpg不重复，否则。我怎样才能做到这一点呢？讨论了工作得很好的纯CSS方法。我们特别研究了两种技术，我个人更喜欢第二种，因为它不依赖于CSS3，更适合我自己的需要 如果您的大多数/所有流量都有一个支持CSS3的浏览器，那么第一种方法实现起来更快、更干净（为了方便起见，Zoidberg先生在这里的另一个答案中复制/粘贴了这一方法，不过我会访问以

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

如果屏幕分辨率大于或等于1200*600，则background=mybackground.jpg不重复，否则。我怎样才能做到这一点呢？

讨论了工作得很好的纯CSS方法。我们特别研究了两种技术，我个人更喜欢第二种，因为它不依赖于CSS3，更适合我自己的需要

如果您的大多数/所有流量都有一个支持CSS3的浏览器，那么第一种方法实现起来更快、更干净（为了方便起见，Zoidberg先生在这里的另一个答案中复制/粘贴了这一方法，不过我会访问以进一步了解其工作原理）

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

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

全屏图像的一个很好的技巧是事先以正确的比例缩放它们。当使用supersize.js或1680x1050进行其他方法时，我的目标尺寸通常为1500x1000，将照片的jpg质量设置为60-80%之间，如果可能，会导致文件大小在100kb或更小的范围内，而不会对质量造成太大影响。

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


Javascript更改Div背景图像
身体{
保证金：0；
宽度：100%；
身高：100%；
}
#第1部分{
背景图片：url（'sky.jpg'）；
宽度：100%
身高：100%
}    
p{
字体系列：Verdana；
字体大小：粗体；
字体大小：11px；
}    
函数changeDivImage（）
{   
//将图像路径更改为字符串
var imgPath=新字符串（）；
imgPath=document.getElementById（“div1”）.style.backgroundImage；
//获取客户的屏幕分辨率
var custHeight=屏幕高度；
var custWidth=screen.width；
//如果屏幕宽度小于或等于640，则使用640 pic url

如果（custwitter我知道这是一个太老的问题，但我想回答一下，这可能会对某人有所帮助。如果你看到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;}




应用CSS
.背景{
背景：无重复滚动0 0#FFFFFF；
身高：200%；
左-50%；
位置：固定；
宽度：200%；}
.背景图像{
底部：0；
显示：块；
左：0；
保证金：自动；
最小高度：50%；
最小宽度：50%；
右：0；
顶部：0；}


此背景图像适合所有尺寸。即使是ipad的纵向视图。它始终会调整图像的中心位置。如果缩小，图像将保持不变。
删除“身体背景图像代码”，然后粘贴此代码：


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



我也遇到过同样的问题，但现在找到了解决办法

诀窍是创建一个1920*1200的壁纸图像。
然后，当您将此壁纸应用于不同的计算机时，Windows 7会自动调整大小以获得最佳匹配

希望这能帮助大家
将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;


}
放入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是您的背景图像
还是其他什么？您的意思是：css3中的“或其他背景=myalternatebackground.jpg无重复”媒体查询