我希望我的背景图片能像幻灯片一样自动切换。但是我希望这些图片可以填满整个背景,无论浏览器窗口的大小如何...并且如果缩小窗口,图片的宽高比不会改变。
以下是我试图实现的示例:
我该如何完成这些任务?任何帮助都将不胜感激。
我希望我的背景图片能像幻灯片一样自动切换。但是我希望这些图片可以填满整个背景,无论浏览器窗口的大小如何...并且如果缩小窗口,图片的宽高比不会改变。
以下是我试图实现的示例:
我该如何完成这些任务?任何帮助都将不胜感激。
通过CSS3,你可以使用background-size
属性。
background-size: contain;
将图像按比例缩放,以最大尺寸适合背景定位区域为止,并保留其固有的纵横比(如果有的话)。
Contain
始终将整个图像适配到你的视口内,在背景图像和浏览器窗口的比例不同时,会在顶部/底部或左侧/右侧留下不透明的边框。
background-size: cover;
将图像按比例缩放,以最小尺寸完全覆盖背景定位区域,并保留其固有的纵横比(如果有的话)。
Cover
始终填充浏览器窗口,在此过程中可能会切掉一些头发或耳朵,这是我个人对于大多数情况的首选。您可以使用background-position属性控制图像在视口中的对齐方式。
background-size
属性进行详细的解释。 - rxgx<!doctype html>
<html>
<head>
<title>Width resolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-size: 20px;
font-family: arial,helvetica,sans-serif;
font-weight: 700;
color:#eee;
text-shadow: 0px 0px 1px #999;
}
div {
width:auto;
height:340px;
border:#ccc groove 2px;
padding:5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').css({'background-color':'#ccc'});
var sw = screen.width;
function wres() {
switch(sw) {
case 1920:
$('div').css({'background':'#192000 url(bg-1920.jpg)'});
$('body').css({'background':'#001920 url(bg-1920.jpg)'});
break;
case 1600:
$('div').css({'background':'#160000 url(bg-1600.jpg)'});
$('body').css({'background':'#001600 url(bg-1600.jpg)'});
break;
case 1280:
$('div').css({'background':'#128000 url(bg-1280.jpg)'});
$('body').css({'background':'#001280 url(bg-1280.jpg)'});
break;
case 1152:
$('div').css({'background':'#115200 url(bg-1152.jpg)'});
$('body').css({'background':'#001152 url(bg-1152.jpg)'});
break;
default:
$('div').css({'background':'#102400 url(bg-1024.jpg)'});
$('body').css({'background':'#001024 url(bg-1024.jpg)'});
}
//alert(rsw);
//$('div').html(rsw);
$('.res').append(' '+sw);
$('div.res').css('width', 1920);
}
//alert(sw);
wres();
});
</script>
</head>
<body>
<h1 class="res">Resolução atual:</h1>
<div class="res">The div</div>
</body>
</html>
在所有浏览器/版本中,您无法可靠地调整背景图像的大小...
在thesixtyone.com网站上看到的效果是通过将普通内联图像拉伸到其容器的100%来实现的,该容器是一个占位符分区。然后,其他元素浮动在此“背景”部分的顶部。
因此,答案不是使用背景图像,而是使图像填充占位符屏幕,然后将其他元素放在其上方。