个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想在导航栏正下方添加背景图像(具有完整窗口大小的宽度)。它不应该覆盖整个页面长度，而是从导航栏菜单下方开始，向下延伸到特定的指定高度。 (但宽度是满的)。
我引用了以下但仍然没有结果: Starting a background image below navbar in Twitter Bootstrap .我也没有使用任何 Bootstrap 。
这是我到目前为止编写的代码，但没有结果:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Numberz</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<nav>
<img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;">
<section style="margin-right: 150px;">
<ul id="menu">
<li><a href="#"><b>SIGNUP</b></a></li>
<li><a href="#"><b>LOGIN</b></a></li>
<li><a href="#"><b>ACCOUNTANTS</b></a></li>
<li><a href="#"><b>BLOG</b></a></li>
<li><a href="#"><b>FEATURES</b></a></li>
<li><a href="#"><b>PRICING</b></a></li>
</ul>
</section>
</nav>
<div id="backgroundimage"></div> //this is the division created for the background image
</body>
</html>
CSS:
ul#menu li {
display: inline-block;
float: right;
position: relative;
margin-top: 28px;
margin-left: 10px;
margin-right: 35px;
}
ul#menu li a {
text-decoration: none;
color: #808080;
font-family: "Helvetica Neue";
font-size: 15px;
}
#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
现在看起来像这样:
我想要这样的东西:
如有任何帮助，我们将不胜感激。
最佳答案
我试过你的代码。尝试更改此行:
#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
为此:
#backgroundimage {
background-image: url("image3.png");
width: 100vw;
height: 100vh;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
然后将其添加到您的 css 中:
nav
{
overflow: auto;
}
这是它有效的证明: 
关于html - 在导航栏正下方添加背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38038056/
25
4
0
我可以在 android 上显示十进制键盘。但是，我需要知道如何在弹出窗口/fragment 中的焦点 editText 或 TextView 下方显示键盘？ android:inputType="n
尽管文本长度大小不同，但我试图将文本直接对齐在每个图标下方。在这张截图中，我希望一切都以这一行为中心: 我曾尝试使用线性和相对布局来获得我想要的内容，但没有成功。这段代码是我现在拥有的，也是最接近我想
我有一个 div，其中有一个全宽的响应图像。 图像的高度和宽度会随着浏览器调整大小而调整。 我想在这个具有响应图像的 div 正下方放置另一个 div。 我好像不太对。 这是我所拥有的:
Toggle navigation
我正在制作一个增强现实应用程序，用户必须在其中将球扔向目标。我使用以下代码将球定位在屏幕前 10 厘米处: var translation = matrix_identity_float4x4 tra
为了实现这一点，我进行了多次尝试。我试图在两条单独的线上实现 3 个 li 标签。在第一行 1 个 li 标签，并在一行的正下方 2 个 li 标签。 这就是我要实现的目标: 这是我目前拥有的: HT
我是一名优秀的程序员,十分优秀！