在另一幅图像上定位和叠加图像 [英] Positioning and overlaying image on another image

问题描述

看看微型Facebook图标如何定位在另一张图片的右下角？

如何使用HTML / CSS / Rails / Prototype的组合？一个例子会很棒。也许在jsfiddle.net。

解决方案

下面是一个简单的使用div代替图片的例子： http://jsfiddle.net/sqJtr/

基本上，您将两张图片在同一个容器中。给容器一个非静态的位置（在我的例子中，是相对的）。然后，使用底部和右边的覆盖图像 position：absolute 。

See how the tiny Facebook icon is positioned in the lower right-hand corner over another image?

How can I do that using a combo of HTML/CSS/Rails/Prototype!? An example would be great. Perhaps in jsfiddle.net.

解决方案

Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.

这篇关于在另一幅图像上定位和叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！