私はrailsプログラミングの初心者で、1つのページに多くの画像を表示しようとしています。 いくつかの画像は他の画像の上に重ねて表示されます。 簡単に説明すると、青い四角と、その右上にある赤い四角(ただし、角に密着していない)を表示したいとします。 パフォーマンスの問題から、(ImageMagickなどを使った)合成は避けたいと思っています。
ただ、重なった画像を相対的に配置したいだけです。
もっと難しい例として、大きな画像の中に置かれたオドメーターを想像してみてください。 6桁の数字を表示するためには、100万もの異なる画像を合成する必要があります。あるいは、6つの画像を重ねて配置するだけで済むように、すべてをオンザフライで行う必要があります。
これは、ある画像を別の画像に重ねるために行ったことを素直に表現したものです。
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
ここでは、そのヒントとなるコードを紹介します。
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>
[JSFiddle][1]をご覧ください。
Espo'solution](https://stackoverflow.com/questions/48474#48484)は、両方の画像を絶対的に配置しなければならないので、不便なのではないかと思います。流れの中で1枚目の画像を配置したい場合もあるでしょう。
通常、それを実現するための自然な方法がCSSにはあります。コンテナ要素にposition: relativeを指定して、その中の子要素を絶対配置するのです。残念ながら、ある画像を別の画像の中に入れることはできません。そのために container div が必要なのです。floatにしたのは、コンテンツに合わせて自動配置するためです。display: inline-blockにしても理論的にはうまくいくはずですが、ブラウザのサポートは貧弱です。
EDIT: 私の言いたいことをよりよく説明するために、画像からsize属性を削除しました。コンテナ画像にデフォルトのサイズを持たせたい場合で、事前にサイズがわからない場合は、background trickは使えません。もしそうであれば、その方が良い方法です。
[1]: