html - RoR 中的图像叠加

Question

我想在 RoR 中将一个图像叠加在另一个图像之上。

在纯 html 中这样做很容易（来自https://stackoverflow.com/a/1997397/1760830）：

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

当我将它放在单独的 file.html 中时，此代码对我有用。然后在 Rails 中我这样做：

<div style="position: relative; left: 0; top: 0">
  <%= image_tag "a.jpg", :style => "position:relative; top:0; left:0;" %>
  <%= image_tag "b.jpg", :style => "position:absolute; top:30; left:70; 
                                    border:thick solid blue;" %>
</div>

但第二张图像显示在第一张图像旁边，没有任何偏移。第二个图像边框被添加到代码中，以检查样式是否实际传递。

任何想法为什么 Rails 版本不起作用？

红宝石 1.9.3，轨道 3.2

Answer 1

因为您复制的代码将第二个图像放在第一个图像旁边。

试试看：

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

那里的样本：http: //fiddle.jshell.net/hmfzN/1/

添加像素和岩石。

在rails / ERB中表示：

<div style="position: relative; left: 0; top: 0">
  <%= image_tag "a.jpg", :style => "position:relative; top:0px; left:0px;" %>
  <%= image_tag "b.jpg", :style => "position:absolute; top:30px; left:70px; border:thick solid blue;" %>
</div>