0

我正在尝试创建一个包含两个部分的页面。第一部分将使用图像作为背景填充整个屏幕，第二部分，用户可以滚动到或单击要滚动到的按钮，其文本类似于下图（显示两个页面一个在另一个之后） 或喜欢Dropbox 网站

我当前的代码是，但这不起作用

  <section  Style="margin-top:0px;
    text-align: center;
    background-color: #000008;
    background-image: url(/assets/highway4.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
  box-shadow: 0 3px 3px rgba(0,0,0,.5);
  height: 1000px;
  width: 1500px"></section>
<section>
the login form code
</section>

我也阅读了这篇文章，但它没有用。没有工作我的意思是：目前我用像素强制高度和宽度，这在所有计算机屏幕上看起来都不一样。所以我试图让它缩放该部分以对每个屏幕尺寸进行全屏显示

4

1 回答 1

1

要将图片和表格全屏显示，您必须先给出

html, body {
    height: 100%;
}

然后您可以提供图像height: 90%并将其余部分保留为表格

.top-image {
    background-image: url(http://lorempixel.com/1500/1000);
    height: 90%;
    width: 100%;
}

查看示例JSFiddle

如果您想要全屏图像，请提供height: 100%给div.

于 2013-11-01T23:00:50.663 回答