フォームを不透明な背景で囲むにはどうすればよいですか？

Question

私はこのコードをフォームしている：

<form class="form-inline"> 

    <div class="form-group col-xs-2 col-md-2"> 
     <label for="name" class="control-label">Mail</label> 
     <input type="email" value='' id="name" placeholder="Email"> 
    </div> 

    <div class="form-group col-xs-2 col-md-2"> 
     <label for="name" class="control-label">Pass</label> 
     <input type="password" value='' id="name" placeholder="Password"> 
    </div> 

    <div class="form-group col-xs-2 col-md-2"> 
     <label for="name" class="control-label"></label> 
     <button type="submit" class="btn btn-default">Log In</button> 
    </div> 

</form> 

次のようになります。（もあり

しかし、私は不透明/透明書き込みの色とそれを囲むように希望を言ってバックグラウンド画像）。あなたは私がここで必要なものの良いアイデアを与えるためには、一例です：

ありがとうございました。

Answer 1

あなたが与えることができますあなたのフォームは、幅と高さを増やすためのパディングです。それから透明な白の背景を与えてください。 以下のサンプルを参照

.form-inline { 
    background-color: rgba(255,255,255,0.3); 
    padding: 20px; 
} 

上記の質問は正しいです。追加された埋め込み

Answer 2

#form_container { 
     background-color: rgba(255, 255, 255, 0.3); 
    } 

以下のようにRGBAと背景色を使用して、例えば、親に背景画像を適用します。

body { 
    background-image: url('NiceBackground.png'); 
} 

Answer 3

body { 
 
    background: url('https://www.w3schools.com/css/trolltunga.jpg'); 
 
} 
 

 
.form-inline { 
 
    background: rgba(255, 255, 255, 0.54); 
 
} 
 

 
.form-inline>div { 
 
    display: inline-block; 
 
    padding: 40px 10px; 
 
    width: 137px; 
 
    overflow: hidden; 
 
}

<form class="form-inline"> 
 

 
    <div class="form-group col-xs-2 col-md-2"> 
 
    <label for="name" class="control-label">Mail</label> 
 
    <input type="email" value='' id="name" placeholder="Email"> 
 
    </div> 
 

 
    <div class="form-group col-xs-2 col-md-2"> 
 
    <label for="name" class="control-label">Pass</label> 
 
    <input type="password" value='' id="name" placeholder="Password"> 
 
    </div> 
 

 
    <div class="form-group col-xs-2 col-md-2"> 
 
    <label for="name" class="control-label"></label> 
 
    <button type="submit" class="btn btn-default">Log In</button> 
 
    </div> 
 

 
</form>