Question

我最近正在做一个项目，感谢友好的教程，我设法找到了以下代码。

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

此代码调整背景图像的大小，使图像在保持正确比例的同时填满整个屏幕，如果图像的一部分大于屏幕，则在裁剪图像时执行此操作。

我遇到的问题是我需要将图像放在“跟随”背景的网页上。（在浏览器调整大小时覆盖相同的区域，总是相同的比例......等等）但是我尝试过的所有方法都没有，但是我想知道这是否可行。

或者换句话说，是否可以通过使图像成为背景来实现相同的效果？

Answer 1

使用“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：

http://jsfiddle.net/alforno/gXdRf/

Html / Css调整大小并裁剪为浏览器大小更改

1 个答案: