Как поместить текст поверх изображения в visualforce (contentType = «application») Я использую vfp и генерирую его как .doc, но я не получаю изображение под столом, как если бы это был фон стола, кто бы можете дать мне какие-либо предложения, спасибо, это была моя последняя попытка

<style type="text/css" >
                @page Section1 {
                size:8.3in 11.7in;
                mso-title-page:yes;
                mso-footer:f1;
                mso-header:h1;
                mso-first-header: fh1;
                mso-first-footer: ff1;
                margin:0.0in 0.6in 0.0in 0.6in;
                mso-header-margin:0.3in;
                mso-footer-margin:0.3in;
                }
                div.Section1{ 
                page:Section1;
                }
                .capa{
                z-index: 0;
                background-image: 
                }
               .textcapa{
                z-index: 1;
                float: right;
                }
                .bg {
                z-index: 0;
                background: url("https://www.oficinadeinverno.com.br/blog/wp-content/uploads/2019/01/oficina-de-inverno-aplicativos-de-edicao-de-fotos-por-do-sol.jpg");
                background-repeat: no-repeat;
                }
                
            </style>
        </head>
<apex:form >  
        <body>
<!--------- Capa ------------------------------------------------------------------------------------------------------------------------------------------------>
            <div class="Section1">   
                <div class="bg">
                    Test
                </div>
            </div>
            
            <div class="Section1">   
                <table class="bg"> 
                    <tr>
                        <td>table test r1</td>
                    </tr>
                    <tr>
                        <td>table test r2</td>
                    </tr> 
                </table>  
            </div>
            
            <table background="{!DocumentCapa}"> 
                <tr>
                    <td>First row</td>
                </tr>
                <tr>
                    <td>Second Row</td>
                </tr> 
            </table>

Результат, который я хочу, выглядит так:

enter image description here

Что я получаю

enter image description here

0
Guedes Sá 24 Ноя 2021 в 21:50

1 ответ

Могут работать два разных подхода. Существует атрибут background для <table>, который устарел, но Office может уважать его:

<table background="{!DocumentCapa}"> 
    <tr>
        <td>First row</td>
    </tr>
    <tr>
        <td>Second Row</td>
    </tr> 
</table>

Вам также следует попробовать использовать CSS для применения фона к div:

<style>
.bg {
    background: url("some-image.png");
    background-repeat: no-repeat;
}
</style>
<div class="bg">
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
</div>
1
nbrown 24 Ноя 2021 в 18:32
Спасибо за советы, оба ваших предложения работают для веб-страниц, но не для слова... он даже не распознает общедоступные изображения из Интернета... Я положу сюда свой код, возможно, я сделал что-то не так... ` `
 – 
Guedes Sá
24 Ноя 2021 в 21:44