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 版本不起作用吗？

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>