Bagaimana untuk Mengawal Keterlihatan Kandungan untuk Mencetak dalam CSS?

CSS Khusus Pencetakan: Memaparkan Kandungan Terpilih

Dalam pembangunan web, anda mungkin menghadapi senario di mana anda perlu mengawal keterlihatan kandungan tertentu berdasarkan sama ada pengguna mencetak halaman. CSS menyediakan penyelesaian untuk perkara ini melalui ciri "@media print"nya.

Sokongan Penyemak Imbas

Kebanyakan penyemak imbas utama menyokong "@media print", memastikan gaya cetakan anda akan berfungsi pada peranti moden.

Menyembunyikan Elemen Tidak Boleh Cetak

Untuk memaparkan hanya elemen terpilih semasa mencetak, kami boleh mendekatinya dalam dua cara:

Kaedah Penandaan Terus:

1. Tambahkan kelas "boleh dicetak" pada elemen yang anda mahu cetak.
2. Gunakan "@media print" untuk menyembunyikan semua elemen kecuali mereka yang mempunyai kelas "boleh dicetak":

@media print {
  * { display: none; }
  .printable, .printable > * { display: block; }
}

Kaedah Pemilihan Negatif:

1. Kita boleh menyembunyikan semua daripada menandai elemen yang boleh dicetak. elemen tidak boleh cetak:

@media print {
  body *:not(.printable *) { display: none; }
}

Mengendalikan Pautan dan Logo

Selain menyembunyikan elemen tidak boleh cetak, anda juga mungkin mahu memaparkan logo atau maklumat kepala surat hanya pada halaman bercetak. Ini boleh dicapai menggunakan pendekatan berikut:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

<div class="noPrint">
   <a href="links.html">Links</a>
</div>
<div class="onlyPrint">
   <img src="logo.png">
   <img src="letterhead.png">
</div>

Ini akan menyembunyikan elemen dengan kelas "noPrint" dalam mod cetakan, sambil memaparkan elemen dengan kelas "onlyPrint" hanya pada halaman bercetak.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Keterlihatan Kandungan untuk Mencetak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!