HTML5 1つの背景に複数入力する

Question

正直言って、CSS3とHTML5で可能ですか？

私は float:left

のプロパティを持つ複数の入力を添付しようとしている。しかし、ここで私が直面していやりがい一部です： -

たび幅と高さの変更は、入力は線引きになります。 入力を画像の中央に固定することはできますか？

HTML：：

<section id="offer"> 
<table WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0"> 
<tr> 
<td WIDTH="100%"> 
<div class="fixedimage"> 
<img src="Projects/Sojo/Documentation/Slice/01_Home/banner.png" /> 
     <input type="text" id="formElement"> 
</div>  
</td> 
</tr> 
</table> 
    </section> 

CSS：私は今、私は、このテーブルのメソッドを使用している、複数の様々な方法を試してみた

：

出力は以下のものでなければなりません

#offer { 
    font-family: 'Montserrat', sans-serif; 
    clear: both; 
    background-color: rgba(246,246,246,1.00); 
    color: rgba(146,146,146,1.00); 
    padding-top: 57px; 
    padding-bottom: 57px; 
} 

.fixedimage img{ 
    width:100% !important; 
    height:100%; 
    display:block;  
} 

#formElement 
{ 
    position:absolute; 
    top:600px; 
    left:25px; 
} 

私は上と左を使用しています応答性のためのフォーム要素。したがって、幅が540px未満の場合は、高さと幅を上書きします。

マイcodepen IO：https://codepen.io/jayvicious/pen/bRGWyx

私は評論家との提案に開いています。 現在のテーブルメソッドを使用するよりも優れた方法があれば、私はすべて耳にします。

Answer 1

フレキシボックスは、古いブラウザ上のプレフィックスプロパティを持つトリッキーなことができますので、あなたがdisplay: table

を使用して、これは便利かもしれないそれは絶対に比べてシンプルかつ完全に応答し、ポジショニング。

Fiddle demo

スタックは、背景画像をページの背景ではない理由がある

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#offer { 
 
    display: table; 
 
    width: 100%; 
 
    height:100%; 
 
    font-family: 'Montserrat', sans-serif; 
 
    background-color: rgba(246,246,246,1); 
 
    color: rgba(146,146,146,1); 
 
    background: url(http://www.hotelstanchini.com/wp-content/uploads/2016/03/tessera-1400x529.jpg); 
 
    background-size: cover; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.cell.at-bottom { 
 
    height: 20px; 
 
    padding: 20px; 
 
} 
 
.cell div { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px; 
 
    background: rgba(255,255,255,0.3) 
 
} 
 
.cell div * { 
 
    position: relative; 
 
    color: black; 
 
    margin: 5px; 
 
}

<section id="offer"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     <div> 
 
     <h1>EXPERIENCE</h1> 
 
     <h5>The moder home of Japan</h5> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell at-bottom"> 
 
     <input type="text" class="formElement"> 
 
     <input type="text" class="formElement"> 
 
     <input type="text" class="formElement"> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

あなたはそれが垂直中央コンテンツに来るとき、それは完璧な選択であるように、そのためのFlexboxを使用し、background-image CSSプロパティとそのを組み合わせることができます：あなたはmore about flexbox hereを読むことができ

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    
 
    min-height: 80vh; 
 
    
 
    background: url('http://www.hotelstanchini.com/wp-content/uploads/2016/03/tessera-1400x529.jpg'); 
 
    background-size: cover; 
 
} 
 

 
.search-form { 
 
    display: flex; 
 
    padding: 16px; 
 
} 
 

 
.search-form input { 
 
    flex: 1; 
 
    width: 100%; 
 
}

<div class="container" > 
 
    <form class="search-form" > 
 
    <input type="text" placeholder="All Japan Cities" /> 
 
    <input type="text" placeholder="Check In Date" /> 
 
    <input type="text" placeholder="Check Out Date" /> 
 
    <input type="text" placeholder="One Guest" /> 
 
    <input type="submit" /> 
 
    </form> 
 
</div>

。

Answer 3

私はあなたの意図を理解していることを望みます。以下は別の方法です。

コードを変更しました。画像の幅が50％になりました。

/* reset */ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul, ol { 
 
    list-style: none; 
 
} 
 
/* styles */ 
 
.hero_wrap { 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
} 
 
.hero_img { 
 
    width: 50%; 
 
} 
 
.hero_over { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 20px; 
 
} 
 
.controls_list { 
 
    text-align: center; 
 
} 
 
.hero_over li { 
 
    text-align: left; 
 
    display: inline-block; 
 
}

<div class="hero_wrap"> 
 
    <img class="hero_img" src="http://www.hotelstanchini.com/wp-content/uploads/2016/03/tessera-1400x529.jpg" /> 
 
    <div class="hero_over"> 
 
    <ul class="controls_list"> 
 
     <li><input type="text"></li> 
 
     <li><input type="text"></li> 
 
     <li><input type="text"></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 4

次のスタイルを追加しよう：

.fixedimage { 
position:relative; 
text-align:center; 
} 

#formElement 
{ 
position:absolute; 
top:50%; 
} 

あなたがポジションを使用する場合：あなたの要素の（親要素の絶対位置を）絶対にあなたが位置を定義する必要があります：相対それは親です あなたの要素をセンタリングするには、top：50％を追加する必要があります。また、水平方向のセンタリングのために、text-align：親要素の中心を追加します。

また、テーブル要素は必要ありません。

Answer 5

は、このCSSコードを使用してみてください。

.fixedimage { 
position:relative; 
} 
#formElement{ 
position:absolute; 
display:block; 
top:0; 
left:0; 
right:0; 
margin:50% auto 0 auto; 
}