filigrane CSS ne fonctionne pas dans Imprimer

Question

je le CSS suivant,

#duplicateCopy { 
    -webkit-transform:rotate(-20deg); 
    -moz-transform:rotate(-20deg); 
    -o-transform:rotate(-20deg); 
    transform:rotate(-20deg); 
    color:#CCC; 
    font-weight:bold; 
    letter-spacing:5px; 
    position:absolute; 
    z-index:1000; 
    top:35%; 
    left:15%; 
    opacity:0.2; 
    filter:alpha(opacity=50); 
} 

et aussi la div suivante dans ma page html

<div id="duplicateCopy"> 
<p style="font-size:70px">Duplicate Copy</p> 
</div> 

Le peu au-dessus de css utilisé pour afficher une marque d'eau page html. Le filigrane fonctionne correctement dans la fenêtre du navigateur. Mais pendant l'impression, le texte du filigrane n'est pas visible. Comment puis-je rendre le texte du filigrane visible pour l'impression?

Answer 1

Essayez d'utiliser media="print" pour ce CSS spécifique ou simplement media='all' en écrivant ce CSS dans un fichier séparé afin qu'il prenne aussi effet au mode d'impression. Et assurez-vous également que votre navigateur prend en charge CSS3. Par exemple:

<link rel="stylesheet" type="text/css" media="all" src="css/style.css" /> 

ou si vous préférez un style distinct pour l'impression, utilisez simplement:

<link rel="stylesheet" type="text/css" media="print" src="css/print.css" /> 

et écrire les styles CSS dans le fichier print.css.