Question

我需要在封面上显示一个大的背景图像。该图像需要：

缩小到region-body的宽度。
准确定位于region-body。

由于需要缩放图像，因此无法使用background-image。因此，我将图片打印在region-before以下的长region-body内。它有效。

然后，我尝试使用region-before和absolute-position="absolute"将图片放在bottom="0cm"的底部。不幸的是，bottom无法按照我的预期运作。（图像保持在顶部。）

<?xml version="1.0" encoding="UTF-8"?> 
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="section1-cover" page-height="11in" page-width="8.5in"
            margin-top="1cm" margin-bottom="0">
            <fo:region-before region-name="xsl-region-before" extent="11in - 1cm  - .75in"
                background-color="beige"/>
            <fo:region-body margin-top="1cm" margin-bottom=".75in" margin-right=".395in"
                margin-left=".395in"/>
            <fo:region-after region-name="xsl-region-after" extent=".75in" background-color="orange"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="section1-cover">
        <fo:static-content flow-name="xsl-region-before">
            <fo:block-container margin-right=".395in" margin-left=".395in"
                absolute-position="absolute" bottom="0cm">
            <!-- I expected that block-container to go down to the bottom -->
                <fo:block line-height=".5">
                <!-- line-height="1" seems more logical but yields unwanted extra space -->
                    <fo:external-graphic src="url('cover-background.jpg')" width="100%"
                        content-width="scale-down-to-fit"/></fo:block>
            </fo:block-container>
        </fo:static-content>
        <fo:flow flow-name="xsl-region-body">
            <fo:block font-size="28pt">Title</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

有没有人有解决方案？

注意：我不想从顶部定位该图像，因为在缩放后我无法可靠地计算图像高度。

注意：它必须在FOP中工作。

Answer 1

使用<fo:region-before display-align="after" />（并省略fo:block-container）。请参阅https://www.w3.org/TR/xsl11/#display-align。

FOP一致性页面（https://xmlgraphics.apache.org/fop/compliance.html）表明FOP具有部分一致性，因此YMMV。

用Larry Wall的话说，有不止一种方法可以做到：

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <fo:layout-master-set>
    <fo:simple-page-master
        master-name="section1-cover"
        page-height="11in" page-width="8.5in">
      <fo:region-body
          margin-top="1cm"
          margin-bottom="0.75in"
          background-color="beige" />
      <fo:region-after
          region-name="xsl-region-after"
          extent=".75in"
          background-color="orange" />
    </fo:simple-page-master>
  </fo:layout-master-set>
  <fo:page-sequence master-reference="section1-cover">
    <fo:flow flow-name="xsl-region-body">
      <fo:block-container
          absolute-position="absolute"
          bottom="0in"
          left="0.395in"
          right="0.395in"
          display-align="after">
        <fo:block line-height="0">
          <fo:external-graphic
              src="url('cover-background.jpg')"
              width="100%"
              content-width="scale-down-to-fit"/>
        </fo:block>
      </fo:block-container>
      <fo:block
          margin-left="0.375in"
          margin-right="0.375in"
          font-size="28pt">Title</fo:block>
    </fo:flow>
  </fo:page-sequence>
</fo:root>

使用AH Formatter V6.5和FOP进行测试。

Answer 2

如果稍微修改图像，可以使用背景图像。例如，您可以创建与页面大小相同的空背景图像，并将图像放置在此空白背景中的正确位置。

在缩放后找到图像高度：

在支持以实际尺寸（mm / in）工作的任何图像编辑器中打开图像。 Illustrator，例如Inkscape。
将图像缩放到所需的宽度。
测量高度（在Inkscape中：在图像上绘制一条垂直线）。

或计算它：你知道你想要图像的宽度（x），以及图像的原始尺寸（高度h和宽度w）。你想要的高度（y）是（x / w）* h。

将缩小的背景图像放置在身体区域的底部

2 个答案: