別のdiv内の画像の上にdivを置く方法は？

Question

この例のように、このバナーの中央にテキスト、ロゴなどを含むdivを挿入するにはどうすればよいですか？

<div class="banner">  
    <img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas"> 
</div> 

例：

マイページ

Answer 1

ここでは、あなたのニーズに合うことができる例があります：

.center{ 
    text-align:center; 
    width:200px; 
    height:100px; 
    background-color:red; 
    position:absolute; 
    top: 50%; 
    left:50%; 
    margin-left:-100px; 
    margin-top:-50px; 
} 

.outter{ 
    width:100%; 
    height: 500px;; 
    background-color:black; 
} 


<div class="outter"> 

    <div class="center"> 
    <h1>Mywebsite</h1> 
    </div> 

</div> 

https://jsfiddle.net/alexcuria/uunwbqyb/

[私はCSSを使用して、テキストやイメージに透明な背景を与えるにはどうすればよい？]の（