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版本没有用？

ruby 1.9.3，rails 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/

添加 px 然后摇滚。

表示在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>

RoR中的图像叠加

1 个答案: