ブートストラップ4で私のバナーの背景イメージの透明度を変更する

私は自分の背景イメージを透明にするために、その中に他のもの（ナビゲーションメニュー、メインテキスト）を透明にしないようにしています。ブートストラップ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

非常に感謝しました。私はこれがちょうどこれらのdivsの優先権を変更すると仮定しますか？ – Aaraeus

@Aaraeusそうです。他にも解決策がありますが、これは私が最初に考えたものです。 – pete

ブートストラップ4で私のバナーの背景イメージの透明度を変更する

答えて

関連する問題