我最近在做一个元素,多亏了一个友好的教程,我设法找到了以下代码。
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;
}
此代码调整背景图像的大小,以便图像在保持正确比例的同时填满整个屏幕,如果图像的一部分大于屏幕,它会在裁剪图像的同时执行此操作。
我遇到的问题是我需要将图像放在“跟随”背景的网页上。 (在背景上覆盖与浏览器调整大小相同的区域,始终保持相同的比例...等)但是在我尝试过的所有方法中,没有一个有效,我想知道这是否可能。
或者换句话说,是否可以通过不将图像作为背景来实现相同的效果?
最佳答案
使用“背景尺寸:封面”。
.sizedbkgrd {
position: absolute;
top: 0px;
left: 0px;
bottom:0px;
right:0px;
background-image: url(http://i3.photobucket.com/albums/y89/Aden93/dance-party.jpeg);
background-repeat: no-repeat;
background-size:cover;
}
用那个类创建一个 div。
<div class="sizedbkgrd"></div>
jsFiddle:
关于Html/Css 随浏览器大小变化调整大小和裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16741363/