使用bootstrap更改我的橫幅背景圖像透明度4

我試圖讓我的背景圖像透明，而不使其中的任何內容（導航菜單，主文本）透明。使用bootstrap更改我的橫幅背景圖像透明度4

我當然搜索了它，發現最好的方法是用與原始圖像大小完全相同的白色圖像疊加。

這就是我試圖做的，但我不知道爲什麼我所有的元素也變得透明。

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; 
}

來源

2017-07-30 Aaraeus

添加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; 
}

讓我知道如果這樣的作品。

來源

2017-07-30 17:29:34 pete

它的工作，非常感謝！我認爲這只是改變了這些div的優先權嗎？ – Aaraeus

@Aaraeus沒錯。還會有其他解決方案，但這是我第一次想到的。 – pete

使用bootstrap更改我的橫幅背景圖像透明度4

回答

相關問題