适当的CSS可以使用左上角和右下角的图像来构图

Question

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

将此定位为模拟的正确方法是什么？

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

使用margin-left: -XXpx;等进行定位不要认为这是正确的

使用vertical-align的位置我没有成功实现此功能

Here is a fiddle of it - Stripped Down

-

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; }

无需漂浮角落图像。