CSS是否可以防止用户对网页进行截图

在浏览互联网时，用户可能会发现需要捕捉一些东西，以便向别人展示，但有时网页上可能有敏感信息，开发者可能不想让用户截图。

用户可以按功能键和windows键以及空格键来拍摄屏幕。在MacOS中，我们必须使用命令、shift和3来拍摄屏幕。

在这篇文章中，我们将看一下如何防止用户对网页进行截图。

如何防止用户进行截图

拍摄屏幕的命令不能被禁用，因为这些是内置的功能，由操作系统控制。我们可以使用HTML、CSS和JavaScript，但仍然无法阻止用户进行截图。由于用户可以复制和粘贴网站的内容，也可以使用一些第三方软件来进行截图，因此阻止用户截图是一项困难的任务。

而我们可以使用一些方法，在一定程度上避免用户对网页进行截图。

示例

在下面的例子中，我们插入了一些文本，然后将其包围在一个div中，然后在CSS部分。之后，我们使用媒体查询，并将显示设置为无。这样一来，用户就可以看到内容，但用户将无法打印屏幕。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of disabling the printing </title>
   <style>
      @media print {
         html,
         body {
            display: none;
         }
      }
   </style>
</head>
<body>
   <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
      the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
      and scrambled it to make a type specimen book. It has survived not only five centuries, but also the 
      leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
      the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </div>
</body>
</html>

示例

在下一个例子中，我们将通过在屏幕上显示一条信息来警告用户不要复制或截图网页的内容。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of disabling the printing </title>
   <style>
      html {
         user-select: none;
      }
   </style>
</head>
<body>
   <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting,
      remaining essentially unchanged. It was popularised in the 1960s with the release of
      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </div>
</body>
</html>

在上面的代码中，我们使用了与前面的例子相同的段落，这次在CSS部分，我们使用了user-select属性，并将其值设置为none。现在，用户将能够看到屏幕上的内容，但不能选择它。输出将是以下内容

示例

在下一个例子中，我们将通过在屏幕上显示一条信息来警告用户不要复制或截图网页的内容。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of printing a warning message to the user </title>
   <script>
      alert("Please!! do not try to take any kinds of screenshot of the content");
   </script>
</head>
<body>
   <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a type 
      specimen book. It has survived not only five centuries, but also the leap into 
      electronic typesetting, remaining essentially unchanged. It was popularised in 
      the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
      and more recently with desktop publishing software like Aldus PageMaker 
      including versions of Lorem Ipsum.
   </div>
</body>
</html>

在上面的代码中，我们再次使用了相同的段落，并使用了JavaScript的一行代码，如果用户试图对网页进行截图，它将向用户发出警告。