我是开发新手,被分配了一项看起来有点挑战性的任务。
我必须创建一个单页网站,在导航中我有关于我们和联系我们的链接。当用户点击关于我们时,用户的屏幕应该滚动到页面上的那个部分,同样的事情来联系我们。我能够做到这一点。
我需要什么帮助?
我正在使用背景图像,我想覆盖用户的屏幕宽度和高度,这样如果用户有更大的屏幕,第二部分就不会显示。
这是我堆放东西的方式:
<div class="header">
<img class="logo" src="/logo.jpg">
<a href="#about" class="link">
<a href="#contact" class="link">
</div>
<div class="part1">
some content
</div>
<div class="part2" aboutus" id="about">
About us
</div>
<div class="part3 contactus" id="contact>
Contact us
</div>
因此,第 1 部分是用户与标题一起看到的第一件事。
问题:
如何显示仅出现在第 1 部分的背景图像并覆盖用户屏幕的整个宽度和高度,无论其大小如何。我确信我需要 JQuery 或一些CSS 结构化但不确定从哪里开始。
我该怎么做才能做到这一点?
最佳答案
.part1{
background: url(http://someurl.com/someimg.png);
background-size: 100% 100%;
width:100%;
height:100%;
}
设置背景大小,设置div全高全宽
关于jquery - 如何在页面的第一部分显示背景图像并使其 100% 覆盖屏幕的可见部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18423532/