圖像邊框上的圓角 - 圖像延伸到邊界之外

這是很簡單的使用Antennahouse：

<fo:block border="1pt solid black" axf:border-radius="4mm">

但是，當我把這個區塊內的圖像時，圖像延伸到矩形的四角，即圖像是在該地區可見在圓角之外（上圖中的黑色區域）。

是否可以隱藏圓角外的圖像區域？

我已經嘗試了使用z-index堆疊2張圖像：z-index = 1爲包含邊框和透明中心的圖像，z-index = 0爲照片。這類作品，但因爲我有不同大小的圖像，我不得不調整邊框圖像的大小，最終得到不同的邊框厚度和半徑。

來源

2017-05-24 Hobbes

，我已經能夠拿出這麼迄今爲止最好的：

<fo:block-container margin="6pt" border="1pt solid black" axf:border-radius="4pt"> 
    <fo:block-container margin-left="-1pt" margin-top="-3pt" margin-bottom="-5pt"> 
     <fo:block margin-left="0"> 
      <fo:external-graphic src="logo.png" border="2pt solid white" axf:border-radius="5pt"/> 
     </fo:block> 
    </fo:block-container> 
</fo:block-container>

來源

2017-05-24 16:21:36

我測試了這個，它工作。 – Hobbes

我遇到了類似的HTML/CSS問題，我通過改變圓角的元素的可見性和背景剪輯屬性來解決這個問題。請參閱Should border-radius clip the content?瞭解線索。

來源

2017-05-24 13:46:01 kbro

感謝。雖然FO沒有背景剪輯屬性，但設置overflow =「hidden」不起作用。 – Hobbes

圖像邊框上的圓角 - 圖像延伸到邊界之外

回答

相關問題