css - 正确的 CSS 来用左上角和右下角的图像框住图像

Question

我正在研究使用不是完美正方形的图像并在图像的左上角和右下角使用它的概念，但我想定位它，使其距离图像滑块 25px。

将其定位为看起来像模型的正确方法是什么？

定位使用position:relative; and top/left: -XXpx;我认为这是最好的方法，但我可能是错的

使用margin-left: -XXpx;etc定位 一点都不觉得

使用vertical-align我的位置无法使其正常工作

这是它的一个小提琴 - 剥离

--

Answer 1

是的，你的第一种方法是最好的：http: //jsfiddle.net/zFa99/8/

您要放在position: relative包含主图像和两个角图像的容器上，然后绝对定位角图像。

#slider { position: relative; }
.tl-corner, .br-corner { position: absolute; }
.tl-corner { bottom: 0; right: 0; } /* this line is not ncessary as top:0 and left:0 are default */
.br-corner { bottom: 0; right: 0; }

无需浮动角落图像。