Maison > interface Web > tutoriel CSS > Comment empêcher la copie du contenu de la page en CSS

Comment empêcher la copie du contenu de la page en CSS

WBOY
Libérer: 2021-12-14 09:25:55
original
4839 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut "user-select" pour obtenir l'effet de ne pas copier le contenu de la page. Cet attribut est utilisé pour spécifier si le contenu de l'élément peut être sélectionné lorsque la valeur de l'attribut est ". none", le contenu de l'élément ne sera pas copié. Sélectionnez, et ne sera pas copié, la syntaxe est "element {user-select:none;}".

Comment empêcher la copie du contenu de la page en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment empêcher la copie du contenu de la page en CSS

En CSS, si vous souhaitez obtenir l'effet de ne pas copier le contenu de la page, vous pouvez utiliser l'attribut de sélection de l'utilisateur.

L'attribut user-select précise si le texte de l'élément peut être sélectionné. Dans un navigateur Web, si vous double-cliquez sur le texte, le texte est sélectionné ou mis en surbrillance. Cette propriété est utilisée pour empêcher ce comportement.

La syntaxe est la suivante :

user-select: auto|none|text|all;
Copier après la connexion

La signification de la valeur de l'attribut est la suivante :

Comment empêcher la copie du contenu de la page en CSS

Il est à noter que :

   -moz-user-select:none; /* Firefox私有属性 */
    -webkit-user-select:none; /* WebKit内核私有属性 */
    -ms-user-select:none; /* IE私有属性(IE10及以后) */
    -khtml-user-select:none; /* KHTML内核私有属性 */
    -o-user-select:none; /* Opera私有属性 */
    user-select:none; /* CSS3属性 */
Copier après la connexion

L'exemple est le suivant :

<html>
<head>
<style> 
body{
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
</style>
</head>
<body>
<h1>user-select 属性</h1>
<div>给页面body元素添加user-select属性,就可以让页面内容禁止复制了。</div>
</body>
</html>
Copier après la connexion

Le résultat de sortie :

Comment empêcher la copie du contenu de la page en CSS

Dans l'exemple ci-dessus, le texte de sortie ne peut plus être copié.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal