Question

我在XSL-FO中实现以下布局时遇到一些问题：

enter image description here

我以为我会创建一个简单的块，周围有一个坚实的黑色边框。然后我将图像放在此块的右上角，以便它覆盖边框。最后，我可以为此图像指定左下边框。

编辑：这是我放置图像的代码。在第一个块中，我将尝试将图像从块内部放置，而第二块则从块外部放置。

<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <!-- Layout-->
    <fo:layout-master-set>
        <fo:simple-page-master master-name = "ticket_layout"
                                                page-height = "297mm"
                                                page-width = "210mm"
                                                margin-left = "10mm"
                                                margin-right = "5mm"
                                                margin-top = "10mm"
                                                margin-bottom = "10mm">

            <fo:region-body margin-bottom = "20mm" margin-top = "25mm"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <!-- page sequence-->
    <fo:page-sequence master-reference = "ticket_layout">
        <!-- Body-->
        <fo:flow flow-name = "xsl-region-body">
        <!-- Info Image-->
            <fo:block-container position="absolute" bottom="10" left="10">
                <fo:block text-align = "right">
                    <fo:external-graphic src="url('Info_Icon.jpg')" border-left= "1pt solid black" border-bottom = "1pt solid black" content-height = "50%"/>
                </fo:block>
            </fo:block-container>
            <!-- Table-->
                <fo:table margin-top = "2mm" padding-bottom = "230mm" font-family = "Agenda" font-size = "11">
                    <fo:table-body>
                        <fo:table-row>
                            <!-- InfoBlock1-->
                            <fo:table-cell >
                                <fo:block padding-bottom= "48mm" margin-right = "1mm" margin-bottom = "1mm" border = "1pt solid black" >
                                    <!-- InfoImage-->
                                    <fo:block-container position="absolute" bottom="60" left="110">
                                        <fo:block text-align = "right">
                                            <fo:external-graphic src="url('Info_Icon.jpg')" border-left= "1pt solid black" border-bottom = "1pt solid black" content-height = "50%"/>
                                        </fo:block>
                                    </fo:block-container>
                                </fo:block>
                            </fo:table-cell>
                            <!-- InfoBlock_2-->
                            <fo:table-cell >
                                <fo:block  padding-bottom= "48mm" margin-left = "1mm" margin-bottom = "1mm" border = "1pt solid black">
                                </fo:block>
                            </fo:table-cell>
                        </fo:table-row>
                    </fo:table-body>
                </fo:table>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

但是我在将图像准确地放在边框上时遇到了问题。它甚至可能吗？

链接到图片：http://i.stack.imgur.com/9FvVr.jpg

我也欢迎其他一些建议！

Answer 1

在您的示例中，您将包含{i}图像的块放在较大的块中。你永远不会让边框以这种方式重叠。根据定义，一个块在另一个块内。

有几种可能的解决方案：

创建一个包含4个单元格的表格，使用单元格边框创建边框图像
使用背景图像（外部图形或嵌入式SVG）作为边框线
使用2个兄弟块容器，绝对位置=＆＃34;绝对值＆＃34;彼此重叠，一个与盒子内容重叠，一个与{i}图像

XSL-FO边框重叠图形

1 个答案: