如何根据屏幕大小更改背景图像，可能使用引导程序

我的background-image:url在我的body在CSS中。问题是当我转换到屏幕变成纵向的移动设备时。我希望使用不同的以肖像为背景的背景。主要是，在我的情况下，“肖像导向”真的只是移动设备，而不是太多的iPad /平板电脑。移动设备的长度和宽度之间的差异更加极端，所以我想在这种情况下链接不同的网址。如何根据屏幕大小更改背景图像，可能使用引导程序

Idk如果有什么方法可以使用Bootstrap的.hidden-xs/.visible-xs来完成这个，那只是我大声思考，但如果有人有解决方案，我会很乐意听到它。这也有帮助，因为我使用的Bootstrap的导航栏变成了触摸屏导航栏时xs，这意味着< 768px，所以我只想在导航栏更改时更改背景图片。

那么有什么想法？在这一点上我是一个新手，这是我第一个真正的项目，不只是孤立的片段。这可能是Java的东西，但idk。我很乐意提供任何帮助。

另外一个快速半相关的问题，我该如何处理background-position: center (-50px from the top)。我是否应该拍摄我想要使用的图片，并在上面用油漆或其他方式添加50px的空白，然后上传它？或者是一种方法来设置这是CSS？

来源

2015-02-24 Tommy K

你可以使用CSS媒体查询，以引导 – ochi 2015-02-24 19:27:09

使用@media查询写窗口大小特定的CSS。例如：

@media (min-width: 400px) { 
    .element { 
     background: #cccccc; 
    } 
} 

@media (min-width: 500px) { 
    .element { 
     background: #888888; 
    } 
} 

@media (min-width: 600px) { 
    .element { 
     background: #222222; 
    } 
}

这里是一个小提琴：http://jsfiddle.net/zhqn1vhh/

来源

2015-02-24 19:31:57

我这样做使用引导。但我确定它会在没有引导的情况下工作。

.class { 
    background-image: image-url("beach.jpg") ; 
    min-height:100%; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -moz-background-size: cover; 
}

来源

2015-02-24 19:28:12

工作还要确保你在你的HTML头戴式'' – 2015-02-24 19:29:57

它使用1920 * 1080分辨率吗？ – 2017-01-06 11:11:27

Media Queries - Bootstrap Grid

你可以有你自己的CSS是这样的：

@media (max-width: 300px) { 
 
    body { 
 
    background-color: red; 
 
    background-image: image-url("http://placekitten.com/g/200/300"); 
 
    } 
 
} 
 
@media (min-width: 301px) and (max-width: 600px) { 
 
    body { 
 
    background-color: blue; 
 
    background-image: image-url("http://placekitten.com/g/400/600"); 
 
    } 
 
} 
 
@media (min-width: 601px) and (max-width: 768px) { 
 
    body { 
 
    background-color: yellow; 
 
    background-image: image-url("http://placekitten.com/g/500/768"); 
 
    } 
 
} 
 
@media (min-width: 769px) { 
 
    body { 
 
    background-color: green; 
 
    background-image: image-url("http://placekitten.com/g/800/1048"); 
 
    } 
 
}

<body> 
 
    html body 
 
</body>

来源

2015-02-24 19:31:37 ochi

如何根据屏幕大小更改背景图像，可能使用引导程序

回答

相关问题