我需要创建一个全页背景.因此,这将工作：
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;
}
所以我会加载一个大的背景图像(大约2000px宽度),但我认为这个解决方案非常糟糕,因为移动转移也会加载这个大图像.
我试图加载附加到屏幕大小的图像：
jQuery(document).ready(function($) {
var win = $(window);
win.resize(function() {
var win_w = win.width(),win_h = win.height(),$bg = $("#bg");
// Load narrowest background image based on
// viewport width,but never load anything narrower
// that what's already loaded if anything.
var available = [
1024,1280,1366,1400,1680,1920,2560,3840,4860
];
var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
var chosen = available[available.length - 1];
for (var i=0; i所以我需要一个像这样的图像元素：
![]()
但这不是真正的背景(就像第一个解决方案).是否可以将jquery脚本调整为html-background-url？
或者有人知道更简单的解决方案吗？
我还想首先加载图像(！),之后淡化网站…我想我需要.load() – jQuery的功能;但我不知道怎么把这个放在剧本里……
最佳答案
这是一个带有过滤器的更新的媒体查询
@media screen and (max-width:1024px){
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largeImage.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largeImage.png',sizingMethod='scale')";
background: url(images/largerImage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
@media screen and (max-width:1140px){
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largerImage.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largerImage.png',sizingMethod='scale')";
background: url(images/largerImage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
你可以在这里找到它的参考
http://css-tricks.com/perfect-full-page-background-image/
