印刷用CSS：左上の画像

@ top-leftのロゴと@ bottom-rightのページ番号を印刷しました。印刷用印刷用CSS：左上の画像

私の最初のスタイルは、この

@page { 
    margin-top: 40mm; 
    margin-bottom: 20mm; 
    margin-left: 30mm; 
    margin-right: 30mm; 

    @top-left { 
     content: background-image: url('images/logo.png'); 
    } 

    @bottom-right { 
     content: "Pág. " counter(page); 
    } 
}

しかし、どちらもロゴあり、どちらもページ番号が表示されます。それは@pageの辺りです、有罪ですか？

ここでは、このスニペットに問題があります。見てください。手伝ってくれますか？

window.print();

@media print{ 
 
@page { 
 
     size: A4 portrait 
 
     margin-top: 40mm; 
 
     margin-bottom: 20mm; 
 
     margin-left: 30mm; 
 
     margin-right: 30mm; 
 

 
     @top-left { 
 
      content: url('http://via.placeholder.com/350x150'); 
 
      width: 350px; 
 
      height: 150px; 
 
      background-color: black; 
 
     } 
 
     
 
     @bottom-right { 
 
      counter-increment: page; 
 
      content: counter(page); 
 
     } 
 
    } 
 

 
    body { font: 12pt Arial; } 
 
    p{ text-align: justify } 
 
    h1 { font-weight: 900; 
 
     color: #0a468c; 
 
     padding: 30px 0 20px 0; 
 
     display: block; 
 
    } 
 
}

<html> 
 
<head></head> 
 
    <body> 
 
     <h1>Title</h1> 
 
     <section> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non risus elementum, vestibulum nisi non, dapibus nisl. In hac habitasse platea dictumst. Nunc varius sapien id nibh ullamcorper, at luctus est vestibulum. Integer lobortis interdum quam, non iaculis urna dapibus nec. Cras et neque pretium est lobortis egestas ut non elit. Cras eget faucibus nunc. Sed accumsan augue leo, et cursus urna luctus eget. Praesent sit amet enim ultricies, vehicula sem vel, suscipit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi tellus, volutpat vel euismod sit amet, fringilla ut ante. Sed tempus metus massa, quis mollis ex dapibus et. Quisque eget aliquam nisi. Ut in elit vitae urna lobortis maximus.</p> 
 

 
<p>Ut ac euismod nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum enim id aliquam bibendum. Integer efficitur, ex eget consequat viverra, velit leo rhoncus massa, ut porta nisi tellus pharetra purus. Morbi id dignissim lectus, sit amet blandit augue. Cras pretium leo vel tellus auctor imperdiet. Donec id faucibus diam. Nullam posuere consectetur tristique. Nullam a rhoncus enim.</p> 
 

 
<p>Praesent et bibendum metus. Sed volutpat erat sed sapien ultrices congue quis ac arcu. Proin nec porta urna. Aliquam eu mattis augue. Aliquam id velit pellentesque, varius urna pellentesque, sollicitudin tellus. Morbi ornare porttitor enim et convallis. Praesent vitae cursus leo. Cras commodo, metus quis euismod congue, lorem erat bibendum turpis, eget faucibus mi arcu sed tellus.</p> 
 

 
<p>Vivamus placerat facilisis vestibulum. Nunc malesuada tempor vestibulum. Pellentesque eu pulvinar nulla, at feugiat sapien. Maecenas bibendum dolor quis ex ultrices, non ornare tortor venenatis. Phasellus ac mauris vitae lacus venenatis sagittis in ac nulla. Integer commodo nulla vitae turpis cursus, ut molestie elit sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lacinia risus id sapien placerat, ac convallis nisl vulputate. Aliquam cursus laoreet metus, et pulvinar leo. Pellentesque et nisi quis diam consequat posuere. Nullam eget erat sit amet nibh hendrerit fermentum nec eget tortor. Etiam mollis, ipsum non mollis viverra, metus libero dignissim ex, et rhoncus leo justo vitae lorem. Cras fermentum luctus accumsan.</p> 
 

 
<p>Curabitur justo ligula, maximus in vehicula id, elementum ut nunc. Quisque ut malesuada ex, sit amet varius sapien. Cras nisl nibh, egestas nec ornare nec, interdum ac dui. Sed tincidunt, nibh et interdum hendrerit, odio mauris mollis metus, quis euismod nulla mi sed velit. Maecenas tincidunt velit nec venenatis finibus. Donec et sem non mauris efficitur sodales et id ante. Mauris id elementum orci. Etiam eu vulputate diam. Pellentesque semper, leo in euismod molestie, sem erat luctus magna, ut bibendum turpis odio porta dui. Mauris justo ipsum, posuere nec viverra et, commodo ac felis. Nullam scelerisque laoreet est ut dignissim. Suspendisse fermentum interdum risus, vel dapibus orci maximus quis. Etiam id quam lacinia, porttitor felis quis, pulvinar enim. Donec maximus blandit pellentesque. Suspendisse et tempus elit.</p> 
 

 

 
     </section> 
 
    </body> 
 
</html>

出典

2017-11-23 Rui Costa

これはあなたがscreenためとprint環境用のカスタムCSSを使用することができますどのような方法の一つです。

私はレイアウトの例を作りました。左上と右下にどのようにロゴとカウンターを配置したのか分かります。それがあなたを助けることができるかどうか見てください。それがどのように動作するか確認するために、フルスクリーンでコードsnippentを開こうとも私はCSSセクション

/* CSS for screen */ 
 
@media screen { 
 
    body{ 
 
    margin: 4em; 
 
    } 
 

 
    #logo{ 
 
    background: url(http://placehold.it/100); 
 
    width: 200px; height: 200px; 
 
    } 
 

 
    #numbers{ 
 
    position: fixed; 
 
    bottom: 4em; right: 4em; 
 
    } 
 
} 
 
/* CSS for printing */ 
 
@media print { 
 
    body{ 
 
    margin: 2em; 
 
    } 
 

 
    #logo{ 
 
    background: url(http://placehold.it/100); 
 
    width: 200px; height: 200px; 
 
    } 
 

 
    #numbers{ 
 
    position: absolute; 
 
    bottom: 2em; right: 2em; 
 
    } 
 
}

<div id="logo">&nbsp;</div> 
 
<div id="numbers">Pág. counter(page)</div>

出典

2017-11-23 09:08:15

あなたが見ることができるように、カウンタは動作しないで、コメントを追加しました。私の目的は、文書のすべてのページにこの作業を行うことです。ウェブとプリントのビューポートは異なる動作をします。あなたは16ブロックで@pageを持っています。ページ番号の場合は –

、それを生成するにはjavascriptまたはサーバー側を使用する必要があります。あなたは私のロゴとカウンターポジションを見ましたか？ –

あなたのスニペットを見ました。あなたが2番目と3番目のページに長いテキスト（2,3ページ...）を持っている場合、そのように見て、内容はあなたのボディマージンを尊重しません。ページカウンタは、 "@ bottom-right" {content：counter（page）;というCSSルールを持っています。 }。私の問題は、 "@ページ"の周りのブロックに何も表示されないことです。テキストも色もない....何もない...引用符は無視してください –

答えて

関連する問題