时间戳

首页 > 解决方案 > 如何在 CSS 中使图像不可选择？

html - 如何在 CSS 中使图像不可选择？

问题描述

我正在制作一个 HTML 和 CSS 网站。我想在其中放置人们无法选择（或拖动）的图像。

早些时候，user-select: none它适用于图像和文本，但现在它不适用于 Chrome>50 上的图像，仅适用于文本。

.text {
  user-select: none;
  font-family: sans-serif;
  letter-spacing: 1.3px;
  line-height: 1.3;
}

div.image img{
  user-select: none;
  width: 50%
}
<body>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed metus efficitur massa placerat auctor faucibus ut mi. Ut sed malesuada felis. Ut varius pharetra orci nec imperdiet. Ut quis nunc elit. Sed scelerisque libero a lacus tempor, eget iaculis augue commodo. Etiam ac elit justo. Nulla pharetra efficitur magna quis gravida. Fusce vulputate lacinia enim ac fermentum. Nullam ac aliquam metus, ac egestas arcu. Cras ac orci finibus purus iaculis mattis quis nec nisl. Proin vehicula eu diam vitae maximus. Quisque ornare a odio a maximus. Donec at nunc fermentum, commodo enim et, finibus libero. Pellentesque ornare ipsum eget ex egestas sagittis.</div>
      <div class="image"><img src="https://images.unsplash.com/photo-1599009434802-ca1dd09895e7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"></div>
    </body>

请注意，在上面的代码片段中，您无法选择文本，但可以选择图像。

如何使图像无法选择？？？

标签： htmlcss

解决方案

也许这个问题最简单的答案是：pointer-events

好的，这里我将向您展示一个示例：

HTML

<body>
  <div class="imageOne">
     <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="just a pic of processor :D">
  </div>
</body>

CSS

.imageOne {
  pointer-events: none; //That's basically it.
}

推荐阅读