如何防止选择图像的边

Question

下面是一张图片，后面是文字。如何防止它周围的区域被突出显示？图像本身不可选择（使用

-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  pointer-events: none;

) 但图像的周围区域是。我尝试为图像添加左右边距，并使图像成为自己的 div 并将上述代码应用于 div，但它不起作用。（我把高亮设置成了绿色）

编辑：这里是另一个例子https://jsfiddle.net/nnzf4h5c/

Answer 1

您可以用相同的样式将内容包装在 div 中：

img {
  max-width: 100%;
  height: auto;
}
.cont01 {
  width: 50px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  pointer-events: none;
}

<div class="cont01"><img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png">
</div>
Text

如何防止选择图像的边

How to prevent the sides of an image from being selected

css

select

image

highlight

pointer-events