web-dev-qa-db-ja.com

画像の上にアイコンを配置する方法は？

画像の上にフォンタウソームのダウンロードアイコンを配置する方法画像の左下隅にいたいです。ユーザーがダウンロードアイコンをクリックすると、画像をダウンロードしたいかどうかを尋ねるプロンプトが表示されます。

そのようです：

enter image description here

関連するコード

_<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- download icon -->
<a href="https://loremflickr.com/320/240/dog" download="new-filename"><i class="fas fa-download"></i></a>

<!-- image of dog -->
<img src="https://loremflickr.com/320/240/dog" alt="dog">_

このメソッドはbootstrap 3フォントアワイソームでも機能しますか？左下隅にあるようなボタンを追加したい場合があります。

enter image description here

Bootstrap Awesomeフォント: https://fontawesome.com/v4.7.0/examples/

htmlcsstwitter-bootstrap-3font-awesome
13
cooldood3490

イメージの周囲に相対的なコンテナが必要です、次にアイコンを位置に設定する必要があります。absolute。

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<div class="container">
   <img src="https://placekitten.com/300/300">
   <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div>

IMGがdisplay: blockになる必要があるのは、デフォルトではimgのdisplay: inline、IMGにはその下部とコンテナの下部の間にスペースがあります。 imgの下に。 display: blockに設定すると、これが停止します。

7
Adam

z-index プロパティを使用してこれを解決できると思います。これを試して：

<img style="z-index: 1;" src="dog.png" alt="dog">

<a style="z-index:2" href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
 _
1
Lucas Piazzi