这是我尝试将此全屏图像应用到的页面:http://www.alexwiley.co.uk/portfolio http://www.alexwiley.co.uk/portfolio
我希望使图像显示 100% 宽度和 100% 高度,直到向下滚动,然后滚动时可以看到下面的内容。
这是我想要做的事情的示例网站:http://www.nilsfrahm.com/ http://www.nilsfrahm.com/
您可以看到他的图像是全屏的,直到他滚动为止。
我在 Adobe Muse CC 中制作这个网站,只是作为附加信息。
您需要使用后台附件:固定;带有背景图像和背景大小:封面;
大屏版本:http://codepen.io/suez/full/wulBv/ http://codepen.io/suez/full/wulBv/
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
div {
width: 100%;
height: 100%;
}
div.first {
background-image: url("http://i.imgur.com/PbV1Grl.jpg");
background-attachment: fixed;
background-size: cover;
}
div.second {
background-image: url("http://i.imgur.com/VWYl1EC.jpg");
background-size: cover;
}
<div class="first"></div>
<div class="second"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)