297

私はRailsプログラミングの初心者で、ページに多くの画像を表示しようとしています。一部の画像は他の画像の上に配置されます。簡単にするために、青い正方形の右上隅に赤い正方形がある青い正方形が必要だとします（ただし、隅にはきつくありません）。パフォーマンスの問題のため、（ImageMagickなどを使用した）合成を回避しようとしています。

重なり合う画像を相互に相対的に配置したいだけです。

より難しい例として、より大きな画像の中に走行距離計を配置することを想像してください。6桁の場合、100万の異なる画像を合成するか、すべてをオンザフライで行う必要があります。必要なのは、6つの画像を他の画像の上に配置することだけです。

4

12 に答える 12

501

わかりました、しばらくして、ここに私が着陸したものがあります：

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}
<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

最も簡単な解決策として。あれは：

ページのフローに配置される相対 div を作成します。ベース画像を最初に相対的に配置して、divがどれくらいの大きさであるべきかを認識できるようにします。最初の画像の左上を基準にしてオーバーレイを絶対的に配置します。トリックは、相対と絶対を正しく取得することです。

于 2010-01-04T03:40:16.717 に答える
84

これは、ある画像を別の画像の上に浮かせるために行ったことの要点です。

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}
<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">

ソース

于 2008-09-07T14:42:30.070 に答える
42

アイデアを提供するコードは次のとおりです。

<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

両方の画像を完全に配置する必要があるため、Espo のソリューションは不便かもしれません。最初の 1 つをフロー内に配置したい場合があります。

通常、これを行う自然な方法は CSS です。コンテナ要素に position: relative を配置し、その中に子を絶対的に配置します。残念ながら、ある画像を別の画像の中に入れることはできません。そのため、コンテナ div が必要でした。内容に合わせて自動調整するために float にしたことに注意してください。表示する: inline-block も理論的には機能するはずですが、ブラウザのサポートが不十分です。

編集：私の要点をよりよく説明するために、画像からサイズ属性を削除しました。コンテナ イメージをデフォルト サイズにしたいが、事前にサイズがわからない場合は、バックグラウンド トリックを使用できません。もしそうなら、それはより良い方法です。

于 2008-09-07T15:37:03.870 に答える
12

エラーを引き起こす可能性があることに気付いた 1 つの問題は、rrichter の回答にある以下のコードです。

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

スタイル内に px 単位を含める必要があります。

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

それ以外は、答えはうまくいきました。ありがとう。

于 2011-11-29T06:07:46.157 に答える
8

pseudo elements親要素に対して絶対に配置できます。

これにより、要素ごとに 2 つの追加レイヤーを使用できます。つまり、ある画像を別の画像の上に配置するのが簡単になります。最小限のセマンティック マークアップ (空の div などはありません) を使用します。

マークアップ:

<div class="overlap"></div>

CSS:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

ライブデモはこちら

于 2013-01-21T08:07:35.150 に答える
6

ここでは、わかりやすくするためだけにインライン スタイルを使用しています。実際の CSS スタイルシートを使用します。

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>
于 2008-09-07T15:42:33.700 に答える
5

これを行う簡単な方法は、background-image を使用し、その要素に <img> を配置するだけです。

もう 1 つの方法は、CSS レイヤーを使用することです。これに役立つリソースがたくさんあります。css レイヤーを検索してください。

于 2008-09-07T14:40:21.307 に答える
0

@buti-oxa: 衒学的ではありませんが、あなたのコードは無効です。HTMLwidthとheight属性では単位を使用できません。width:CSSとheight:プロパティについて考えている可能性があります。タグとともにcontent-type ( text/css; Espo のコードを参照)も提供する必要があります<style>。

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

および属性を残すpx;と、レンダリング エンジンがボークする可能性があります。widthheight

于 2008-09-07T15:50:41.420 に答える
0

ページのフローに配置される相対 div を作成します。ベース画像を最初に相対的に配置して、divがどれくらいの大きさであるべきかを知るようにします。最初の画像の左上を基準にしてオーバーレイを絶対的に配置します。トリックは、相対と絶対を正しく取得することです。

于 2020-02-03T05:25:48.413 に答える