时间戳

首页 > 解决方案 > 导航栏后面的图片

html - 导航栏后面的图片

问题描述

使用引导程序 4 和 html为我的项目制作这样的登录页面，而 html 无法隐藏导航栏后面的背景图像

标签： htmlcssbootstrap-4

解决方案

我已经在我的Codepen帐户上完成了此操作，唯一的区别是您必须更改我将徽标放在导航栏的位置，并且不要使其成为 img div 的中心，使其像你提供的例子。

见下文：

<div class="header_img">

    <div class="row logo-container-div align-items-center justify-content-center">
     <div class="logo-wrapper col-auto" >
       <h1>LOGO HERE</h1>
       <p>Some additional text</p>
    </div>
    </div>
  </div>

CSS：

.header_img {
    height: 800px;
    width: 100%;
    background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
    background-position: 0%, 0%, 50%, 50%;
    background-attachment: scroll, fixed;
    background-size: auto, cover;
}


.logo-container-div {
  min-height: 70vh;

}

.logo-wrapper {

    font-family: 'Raleway', sans-serif;
    padding: 25px 30px;
    border: 2px solid white;
    color:#fff;
    text-align:center;
    position: fixed;

  }

.logo-wrapper h1 {
  font-size: 36px;
}

.logo-wrapper p {
 font-size: 18px; 
}

在这里查看：https ://codepen.io/billyfarroll/pen/qYWYYV

您将需要flex:justify和align元素以及background-position&background-size

推荐阅读