CSSの背景として画像にテキストボックスやボタンなどを配置するにはどうすればよいですか?
サナト・デシュパンデ
ここでわかるように、「ファイルをアップロード」ボタンと「ファイルを選択」ボタンは画像の上にあり、画像上でそれらを移動することはできません。
<form class="w3-container " action="add_file.php" method="post" enctype="multipart/form-data" style="position:absolute;z-index:20%;margin-left:50%;">
<input type="file" name="uploaded_file"><br>
<input type="submit" value="Upload file">
</form>
<p>
<a href="list_files.php">See all files</a>
</p>
<div>
<img src="switzerland_alps_mountains_night_beautiful_landscape_99817_1920x1080.jpg">
</div>
ドラゼン
この？
body {
margin: 0
}
.content {
position: relative;
margin: 10px;
box-sizing: border-box;
}
img {
position: aboslute;
width: 100%;
}
button {
position: absolute;
top: 0;
left: 0;
}
button:nth-of-type(2) {
margin-left: 50px;
}<div class="content">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<button>hi</button>
<button>hello</button>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
テキストボックスとボタンのある画像にxmlビューを配置するにはどうすればよいですか？
- 2
CSS：背景画像を修正してテキストボックスを作成するにはどうすればよいですか？
- 3
WPFでテキストボックスが空のときにボタンの画像を変更するにはどうすればよいですか？
- 4
Facebookのプロフィールテキストボックスへのリンクをコピーして、ページのタイトルや画像などを共有するにはどうすればよいですか？
- 5
テキストボックスにテキストがないときにボタンを無効にするにはどうすればよいですか？
- 6
グリッドを使用して、テキストと画像の横にボタンを表示するにはどうすればよいですか
- 7
iPhoneのように、HTMLテキスト入力ボックス内にクリアボタンを配置するにはどうすればよいですか？
- 8
swtのボタンをクリックしたときにテキストボックスを作成するにはどうすればよいですか？
- 9
ボタンをxamarinフォームのスタックレイアウトとして使用して、ボタンをカスタマイズし、テキストの位置と画像の位置を操作するにはどうすればよいですか？
- 10
Python GUIを使用してボタンとテキストボックスをカスタマイズするにはどうすればよいですか？
- 11
テキストボックスのコンテンツをデータベースに保存するにはどうすればよいですか？テキストボックスはHTMLとCSSでプログラムされています
- 12
React Testing Libraryを使用して、テキストのないボタンを見つけてクリックするにはどうすればよいですか？
- 13
フロート左の画像とフロート右のテキストをボックス内に配置するにはどうすればよいですか？
- 14
Rマークダウンで画像の上に複数のテキストボックスを配置するにはどうすればよいですか
- 15
JavaScriptで、ボタンをクリックしてボタン内のテキストを取得するにはどうすればよいですか？
- 16
テキストボックスの値を使用してラジオボタンに値を設定するにはどうすればよいですか
- 17
やることリストを追加するボタンをクリックしたときに、異なる背景色のアイテムを生成するにはどうすればよいですか？
- 18
2つのボタンを使用して2つのボックス間でテキストを移動するにはどうすればよいですか？
- 19
「CarouselSlider」を使用しながらモバイルサイズに対して画像サイズを調整し、その画像にボタンテキストをフラッターで配置するにはどうすればよいですか？
- 20
リスト内のテキストの後にボタンを配置して、同じ列に配置するにはどうすればよいですか？
- 21
multicolを使用してボタンとテキストの行が折り返されないようにするにはどうすればよいですか？
- 22
背景がテキストとともに広がるフラッターのキャンバス上で、カスタム編集可能なテキストボックスを作成するにはどうすればよいですか？
- 23
c＃：チャートとテキストボックスを単一の画像（* .pngなど）に保存するにはどうすればよいですか？
- 24
CSSで入力ボックスの以前に入力したテキストの背景色を変更するにはどうすればよいですか？
- 25
背景をぼかしても、ぼやけていない背景をテキストにクリップするにはどうすればよいですか？
- 26
Pythonを使用してチェックボックスボタンとチェックボックステキストを画像から分離するにはどうすればよいですか？
- 27
画像とテキストでボタンを作成するにはどうすればよいですか？
- 28
ボタン内に複数のテキストを配置するにはどうすればよいですか？
- 29
cssを使用してボックス内にテキストを配置するにはどうすればよいですか？
コメントを追加