印刷またはPDFへの変換時にCSSの境界線が表示されない

このHTML表に丸みのある境界線で表示された要素を印刷したいが、ページを印刷するとすぐにCSSクラスが表示されなくなっているようだ。誰も助けることができますか？印刷またはPDFへの変換時にCSSの境界線が表示されない

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Title</title> 
     <style type="text/css"> 
       .hashtag { 
        display: inline-block; 
        color: white; 
        font-size: 20px; 
        background-color: rgba(46, 200, 40, 0.5); 
        margin-left: 1px; 
        margin-right: 1px; 
        margin-top: 1px; 
        margin-bottom: 1px; 
        padding: 0.0em 0.5em; 
        border-radius: 1em; 
        text-indent: 0; 
        text-align: center; 
       } 
     </style> 
    </head> 
    <body> 

    <tr> 
     <td> 
      <p class="hashtag" align="center">CSS</p> 
      <p class="hashtag" align="center">WON'T</p> 
      <p class="hashtag" align="center">PRINT</p> 
     </td> 
    </tr> 
    </body> 
    </html>

出典

2017-12-21 Hermann Stahl

技術あなたが「PDFとしてHTMLを印刷する」を使用している：？たとえば、以下の抜粋を参照してください私はあなたの質問でこれを見落としているか、この重要な情報を追加するのを忘れています。 –

色付きの背景に白いテキストを印刷しようとしていますが、ほとんどのブラウザではデフォルトで背景が印刷されません（そうであれば、ユーザーが有効にする設定を変更したためです）。

あなたのスタイルシートに加えて@media print { ... }を使用して、これを準備することができます。スタイルシートを変更すると、より適切に印刷されるように適用スタイルが変更されます。

.hashtag { 
 
    display: inline-block; 
 
    color: white; 
 
    font-size: 20px; 
 
    background-color: rgba(46, 200, 40, 0.5); 
 
    margin-left: 1px; 
 
    margin-right: 1px; 
 
    margin-top: 1px; 
 
    margin-bottom: 1px; 
 
    padding: 0.0em 0.5em; 
 
    border-radius: 1em; 
 
    text-indent: 0; 
 
    text-align: center; 
 
} 
 

 
@media print { 
 
    .hashtag { 
 
    color: black; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    } 
 
    #btnPrint { 
 
    display: none 
 
    } 
 
}

<p class="hashtag" align="center">CSS</p> 
 
<p class="hashtag" align="center">WILL</p> 
 
<p class="hashtag" align="center">PRINT (B/W)</p> 
 

 
<button id="btnPrint" onclick="window.print()">Print</button>

出典

2017-12-21 12:51:31

暗い背景に白いテキストを使用しています。しかし、ほとんどのブラウザでは、デフォルトで背景画像や背景色が印刷されないため、ケースの白/白の背景に白いテキストが表示されます。つまり、表示されません。

はですが、背景色を印刷することは可能ですが、これはユーザーが設定または変更できるブラウザの設定/設定で、CSSやWebサイトの他のコードではできません。

出典

2017-12-21 12:34:29 Johannes

印刷またはPDFへの変換時にCSSの境界線が表示されない

答えて

関連する問題