Image d'arrière-plan de la table

Question

Nous devons définir l'image d'arrière-plan d'une table. Une façon consiste à définir l'attribut d'arrière-plan de la balise de table, mais cela doit activer l'option printbackground dans le navigateur lors de l'impression. Tout autre moyen comme nous pouvons définir z-index de l'image et la table?

Answer 1

Ceci est vraiment une quetion CSS. L'index z prend effet uniquement lorsque les objets sont positionnés de manière absolue. Il est utilisé pour définir manuellement l'ordre dans lequel les éléments apparaissent les uns sur les autres. Si un élément HTML apparaît après un autre, par défaut, il apparaîtra au-dessus de l'autre, et vous pouvez utiliser z-index pour remplacer cette valeur par défaut.

<img src="some image"/> 
<div>some text</div> 

<style type="text/css"> 
img, div { 
    position: absolute; 
} 
</style> 

Dans le code HTML ci-dessus, la div apparaîtra en haut, et z-index pourrait être utilisé pour changer cela. Qu'est-ce que vous essayez d'obtenir afficher une image de fond pour une table, y compris quand il est en cours d'impression - ai-je raison? Votre problème est que, par défaut, la plupart des navigateurs n'impriment pas les images d'arrière-plan (pour économiser de l'encre et faciliter la lecture). Vous pouvez généralement choisir d'imprimer avec des images d'arrière-plan dans les paramètres de votre navigateur si vous le souhaitez, alors peut-être vous n'avez pas besoin de forcer sur votre site, notez simplement aux utilisateurs d'activer les images d'arrière-plan dans leurs paramètres d'impression.

Mais si vous ne voulez en effet forcer les utilisateurs à imprimer l'image d'arrière-plan, votre code peut ressembler à ceci:

<img class="table-bg-image" src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png"/> 
<table class="with-bg-image"> 
    <tr><td>Table contents here</td></tr> 
</table> 

<style type="text/css"> 
    img.table-bg-image { 
     position: absolute; 
     z-index: -1; 
    } 
    table.with-bg-image, table.with-bg-image tr, table.with-bg-image td { 
     background: transparent; 
    } 
</style> 

N'oubliez pas de comparer la taille de l'image à la taille de la table. Le positionnement absolu de l'image la fera «flotter» sous la table, car si vous ne définissez pas les attributs «top» et «bottom», le positionnement absolu ne change pas la position d'un élément (cela signifie seulement qu'il ne le fait pas). ne prends aucune place). Le fait que l'élément soit positionné de façon absolue l'oblige à s'afficher au-dessus de la table par défaut, nous utilisons donc un z-index négatif pour le faire apparaître derrière.

Answer 2

Vous pouvez placer un DIV derrière et y placer l'image, puis positionner la table exactement par-dessus. Voilà.