css - dans - font style bold



Comment faire pour que Firefox imprime un style de fond de couleur? (4)

C'est un paramètre du navigateur. Il n'y a rien que vous puissiez faire dans votre CSS. Dans Windows - File > Page Setup... > Print Background .

J'ai quelques CSS simples:

#someElement {
    background-color:black;
    color:white;
}

Il semble correct dans le navigateur, mais quand je vais l'imprimer dans Firefox, il apparaît comme un texte noir sur un fond blanc. J'imagine que c'est une sorte de fonction d'économie d'encre, mais y a-t-il un moyen de contourner le problème?


Answer #1

Peut-être pas la réponse que vous cherchez, mais voici:

Je préfère ajouter une feuille de style séparée pour l'impression de la page. En règle générale, vous souhaitez supprimer des éléments tels que les menus de navigation, les fils d'Ariane, les publicités et peut-être modifier légèrement les marges, les paddings, les bordures et les polices par rapport à la feuille de style à l'écran.

Même penser à forcer l'utilisateur à remplir une page entière avec de l'encre noire avec du texte blanc me semble idiot.

Pour ajouter une feuille de style d'impression distincte, ajoutez une autre feuille de style à la tête de votre page.

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

Answer #2

Il y a une solution simple pour cela.

Pour la background-color , au lieu d'utiliser:

background-color: red

Utilisation:

background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
                                     number that is definitely 
                                     larger than the box dimension*/

Aussi pour la color , au lieu de:

color: grey;

Utilisation:

color: unset;
text-shadow: 0 0 grey;

Vous pouvez les limiter à l'impression en utilisant @media print , mais vous n'avez pas à le faire!

Note: Parfois, vous devriez utiliser background-color: transparent; ou color: transparent; si la color ou la color background-color sont héritées des éléments parents.


Answer #3

C'est ainsi que je l'ai fait fonctionner dans mon cas en ajoutant les deux lignes ci-dessous à la div particulière. "@@ supports (-moz-appearance: meterbar)" est utile pour ajouter des styles spécifiques à Firefox.

-webkit-print-color-adjust: exact; ajustement de la couleur: exact;

@@supports (-moz-appearance:meterbar) {
    .container {
        margin: 0;
        font-size: 0.85em;
        width: 100%;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}




print-css