Étiquette : couleur

Imprimer des couleurs de fond avec SVG

Source: Printing background colors with CSS and SVG

Browser support

• Works on all modern desktop browsers (tested in Edge 14–16, Firefox 58–60, Chrome 61–63, Safari 11)
• Not tested on mobile browsers
• Does not work in IE11

<header class="grid-x grid-padding-x page-header"> <div class="large-12 cell page-header-content"> <h1>Titre principal</h1> </div> </header>

1 2 3 4 5

<header class="grid-x grid-padding-x page-header">   <div class="large-12 cell page-header-content">     <h1>Titre principal</h1>   </div> </header>

// https://fvsch.com/css-print-background/ .page-header { position: relative; } .page-header > * { position: relative; z-index: 2; } .page-header::before { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; /* In the URL, change the background to your own color. Warning: the `#` character must be escaped as %23, for example: `background:%23FFFF00` (yellow). */ // content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:YOUR_COLOR_HERE' />"); content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:%23FFFF00' />"); } .page-header { color: #fff; // background: #000; border-bottom: 30px solid tomato; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// https://fvsch.com/css-print-background/ .page-header {   position: relative; } .page-header > * {   position: relative;   z-index: 2; } .page-header::before {   position: absolute;   z-index: 1;   top: 0;   bottom: 0;   left: 0;   right: 0;   overflow: hidden;   /*     In the URL, change the background to your own color.     Warning: the `#` character must be escaped as %23,     for example: `background:%23FFFF00` (yellow).   */   // content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:YOUR_COLOR_HERE' />");   content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:%23FFFF00' />"); }   .page-header {     color: #fff;     // background: #000;     border-bottom: 30px solid tomato; }

Imprimer du texte en couleur

Attention: testé uniquement sous Chrome! Appliquer -webkit-print-color-adjust: exact; sur l’élément body et cibler avec précision l’élément à imprimer en couleur (ne fonctionnera pas sur des enfants, si la couleur est déclarée sur un élément parent) tout en ajoutant !important.

body { -webkit-print-color-adjust: exact; } @media print { .page-header h1 { color: $white !important; } }

1 2 3 4 5 6 7 8 9

body {   -webkit-print-color-adjust: exact; }   @media print {   .page-header h1 {     color: $white !important;   } }