Question

我正在尝试使我的背景图像透明而不使其中的任何其他内容（导航菜单，正文）透明。

我当然用Google搜索，发现最好的方法是使用与原始图像完全相同的白色图像进行叠加。

这就是我试图做的，但我不确定为什么我的所有元素也变得透明。

HTML：

<html>

  <div class="container-fluid">

<div class="banner-img">
    <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Kintesh</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">CV</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Portfolio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Contact</a>
  </li>
</ul>


        <div class="col-xs-2 logo text-center"><span class="welcome-text-bold">K</span>intesh <span class="welcome-text-bold">P</span>atel</div>
    </div>

      <div class="blurb">
    Some interesting stuff goes here, I guess?
  </div>

  </div> <!-- End of container-fluid -->
</html>

CSS：

/* 
Dark Grey: #A9A9A9;
Light white: #8C8D8D;
Watermelon for vibrancy: #FC0B56;
Light grey for reasons: #8C8D8D;
Orange: #e37222;
Blue: #CAEBF2;

Canary wharf img url: https://image.ibb.co/kZ0n0Q/boris_stefanik_119208.jpg
*/

/* 
font-family: 'Ubuntu', sans-serif;
font-family: 'Lobster', cursive;
font-family: 'Pacifico', cursive;
font-family: 'Asap', sans-serif; 
*/

@import url('https://fonts.googleapis.com/css?family=Asap|Lobster|Pacifico|Ubuntu');


body, html {
  background-color: #fff;
  height: 100%;
}

body {
  padding-top: 0px;
}

.banner-img {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.banner-img:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-image:url('https://image.ibb.co/kZ0n0Q/boris_stefanik_119208.jpg');
}



.content {
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px;
}

.container-fluid {
  padding: 0px;
  background-color: #fff;
}


.welcome-text-bold {
  color: #FC0B56;
}

.logo {
  color: #efefef;
  font-weight: 800;
  font-size: 5em;
  padding: 5%;
  text-align: center;
/*   font-family: 'Pacifico', cursive; */
  font-family: 'Asap', sans-serif;
  text-align: center;
}

Answer 1

将position: relative; z-index: 1;添加到透明图像顶部所需的元素 -

CSS：

@import url('https://fonts.googleapis.com/css?family=Asap|Lobster|Pacifico|Ubuntu');


body, html {
  background-color: #fff;
  height: 100%;
}

body {
  padding-top: 0px;
}

.banner-img {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.banner-img:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-image:url('https://image.ibb.co/kZ0n0Q/boris_stefanik_119208.jpg');
}



.content {
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px;
}

.container-fluid {
  padding: 0px;
  background-color: #fff;
}


.welcome-text-bold {
  color: #FC0B56;
}

/* New css for nav ul */
ul {
  position: relative;
  z-index: 1;
}

/* Add css to logo */
.logo {
  position: relative;
  z-index: 1;
  color: #efefef;
  font-weight: 800;
  font-size: 5em;
  padding: 5%;
  text-align: center;
/*   font-family: 'Pacifico', cursive; */
  font-family: 'Asap', sans-serif;
  text-align: center;
}

如果有效，请告诉我。

使用bootstrap 4更改横幅背景图像透明度

1 个答案: