Question

我无法弄清楚如何为我的网站设置背景图片而不会干扰我的导航栏。似乎图像喜欢为我的导航栏显示。好像我的导航栏上的css有问题？我是HTML / CSS的新手，所以任何帮助都会受到赞赏：）。

＆＃13;

html {
  background: url(background-image.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

/* TOP-NAV CSS */

.navbar {
  margin: 0 auto;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 1.43;
  color: #484848;
  overflow-x: hidden;
}

.top-nav {
  position: relative;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ccc;
}

.logo:link {
  position: relative;
  color: #484848;
  display: inline-block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease; /*Chrome/Opera/Safari */
  -moz-transition: all 0.3s ease; /* Firefox */
  -ms-transition: all 0.3s ease; /* IE */
}

.logo:visited {
  color: #484848;
}

.logo:hover {
  background-color: #f1f1f1;
}

/* Image Logo */

.logo img {
  position: relative;
  padding: 16px 19px;
  width: 100px;
  border-right: 1px solid #ccc;
  vertical-align: middle;
}

/* NAV-SEARCH CSS */

#nav-search-wrapper {
  display: inline-block;
  width: 490px;
  height: 100%;
}

/* Search Bar Form */

#nav-search-wrapper form input {
  padding: 18px 10px 18px 52px;
  width: 100%;
  border: none;
  outline: none;
  color: #666;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-image: url('search-icon.svg');
  background-repeat: no-repeat;
  background-position: 25px;
  background-size: 18px;
}

＆＃13;

<div class="navbar navbar-default navbar-fixed-top">
    <header>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalabe=no" />
    <link rel="stylesheet" type="text/css" href="header.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" />
      <div class="top-nav clearfix">
      <a href="" class="logo">
        <img src="" class="logo"/>
      </a>
        <div id="nav-search-wrapper">
          <form method="GET" action="">
            <input type="text" name="search" id="nav-search" placeholder="Search" />
          </form>
        </div>
      <ul>
        <li><a href="">Ticket Form</a></li>
        <li><a href="">Locations</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Sign Up</a></li>
        </ul>
      </div>
    </header>
</div>

＆＃13;

Answer 1

如果您希望文本字段变得透明。和您的网站的背景图片，而不会干扰该导航栏。

然后

在.css文件中添加不透明度。

喜欢这个

#nav-search-wrapper { display: inline-block; width: 490px; height: 100%; opacity: 0.6; filter: alpha(opacity=60); }

Answer 2

尝试将background-color: #fff和z-index属性放在.navbar上并查看它是否与您的背景重叠。

检查此更新的答案。一切正常，或者你最好发布所有代码，这样我们就可以弄明白它的真正问题是什么。

＆＃13;

    body {
    //    background: url(background-image.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background-color: #000; /* just to check if the background applies */
    }
    
    /* TOP-NAV CSS */
    .navbar {
        margin: 0 auto;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        line-height: 1.43;
        color: #484848;
        overflow-x: hidden;
        background-color: #fff; /* whole top bar will filled by white color */
    }

    .top-nav {
        position: relative;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #ccc;
    }

    .logo:link {
        position: relative;
        color: #484848;
        display: inline-block;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        /*Chrome/Opera/Safari */
        -moz-transition: all 0.3s ease;
        /* Firefox */
        -ms-transition: all 0.3s ease;
        /* IE */
    }

    .logo:visited {
        color: #484848;
    }

    .logo:hover {
        background-color: #f1f1f1;
    }
    /* Image Logo */

    .logo img {
        position: relative;
        padding: 16px 19px;
        width: 100px;
        border-right: 1px solid #ccc;
        vertical-align: middle;
    }
    /* NAV-SEARCH CSS */

    #nav-search-wrapper {
        display: inline-block;
        width: 490px;
        height: 100%;
    }
    /* Search Bar Form */

    #nav-search-wrapper form input {
        padding: 18px 10px 18px 52px;
        width: 100%;
        border: none;
        outline: none;
        color: #666;
        font-size: 14px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        background-image: url('search-icon.svg');
        background-repeat: no-repeat;
        background-position: 25px;
        background-size: 18px;
    }

＆＃13;

<div class="navbar navbar-default navbar-fixed-top">
    <header>
        <div class="top-nav clearfix">
            <a href="" class="logo">
                <img src="" class="logo" />
            </a>
            <div id="nav-search-wrapper">
                <form method="GET" action="">
                    <input type="text" name="search" id="nav-search" placeholder="Search" />
                </form>
            </div>
            <ul>
                <li><a href="">Ticket Form</a></li>
                <li><a href="">Locations</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Sign Up</a></li>
            </ul>
        </div>
    </header>
</div>

＆＃13;

出现在NavBar下的背景图象

2 个答案: