如何在图像结束后开始显示文本而不是显示在图像上？

时间：2018-03-07 21:44:25

标签： html css bootstrap-4

我有一个用作背景的图像，我有一个显示在图像上的导航栏。当我添加一个p标签时，它也会显示在图像上。我使用绝对位置来保持导航在页面顶部，但是p标签也显示在图像上而不是下面。

我尝试删除了位置样式，但它也会移动导航。

example

HTML 

    <!DOCTYPE html>
<html>
<head>
  <title>Sabah Khan</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="background">
    <img src="images/bg.jpeg">
  </div>

<nav class="navbar navbar-default">
  <div class ="container-fluid">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#expereince">Experience</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

<div id="skills" style="overflow:hidden;">
<p>some information</p>
</div>
</body>
</html>

CSS 

html{
  height: 100%;
  }

  #background img{

  position: absolute;
  width: 100%;
  opacity: 0.6;
}

.nav{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav li{
  padding: 30px 15px;
  margin-top: 20px;
}
.nav a{
  color: rgb(66,69,86);
}

.navbar-default{
  background:transparent;
  background-image:none;
  border-color:transparent;
  box-shadow:none;
}

3 个答案:

答案 0 :(得分：0)

使用background-image和position: relative;

https://jsfiddle.net/tg1vgq2o/18/

HTML 

<html>
<head>
  <title>Sabah Khan</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
  <nav class="navbar navbar-default">
    <div class ="container-fluid">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#expereince">Experience</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>


<div id="skills" style="overflow:hidden;">
  <p>some information</p>
</div>
</body>
</html>

CSS 

html{
  height: 100%;
}

.header {
  background: url('https://image.freepik.com/free-vector/abstract-design-background_1048-6726.jpg') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  overflow: hidden;
  outline:none;
  background-color: Transparent;
}

.nav{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.nav li{
  padding: 30px 15px;
  margin-top: 20px;
}
.nav a{
  color: rgb(66,69,86);
}

.navbar-default{
  background:transparent;
  background-image:none;
  border-color:transparent;
  box-shadow:none;
}

答案 1 :(得分：0)

删除img标签并将其设置为背景，这给了我想要的结果！

html,
body {
  height: 100%;
}

#background {
  /* The image used */
  background-image: url("https://unsplash.it/1600/900/?image=100");
  /* Set a specific height */
  height: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav li {
  padding: 30px 15px;
  margin-top: 20px;
}

.nav a {
  color: rgb(66, 69, 86);
}

.navbar-default {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="background">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#expereince">Experience</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>


<div id="skills" style="overflow:hidden;">
  <p>some information</p>
</div>

答案 2 :(得分：0)

您有几个选项，但最简单的方法是将图片包含<img>标记，并使其与img-fluid类一致。以下是。

此解决方案还使用常规的无响应导航。这是您在导航栏导航中包含的内容。我不确定这是你的意图所以我将导航条导航中的无响应导航器拉出了这个例子。第二种解决方案使用导航栏导航而不是非响应导航。

＆＃13;
＆＃13; 
body {
  padding-top: 40px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <ul class="nav justify-content-center fixed-top">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#expereince">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>         </li>
    </ul>

<img class="img-fluid hero" src="https://unsplash.it/1600/900?image=100">

<main>
  <p>Content goes here.</p>
</main>
＆＃13;
＆＃13;
＆＃13;

您可以继续使用background-image。这里的技巧是将底部填充设置为与图像的尺寸比率匹配的百分比。在这里我使用了一个16：9比例的图像，所以9/16 = 56.25％，这是我用于底部填充的。

此解决方案演示了响应式导航栏导航，它在较小的屏幕上提供汉堡菜单按钮（带有三行的按钮）。在此示例中单击时它不起作用，因为它需要我没有包含的Bootstrap JS。

＆＃13;
＆＃13; 
.hero {
  padding-bottom: 56.25%;
  background-image: url( 'https://unsplash.it/1600/900?image=100' );
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  padding-top: 56px;
{
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="hero"></div>

<main>
  <p>Content goes here.</p>
</main>
＆＃13;
＆＃13;
＆＃13;

可以在两个示例之间更换导航类型。

您还会注意到我已将padding-top添加到body。这样固定导航不会覆盖内容。如果我们不这样做，部分图像将隐藏在导航后面。

相关问题
最新问题