CSS - 除矩形覆盖区域外，使图像变暗

Question

我有一个<img>元素想要像下面这样突出显示特定区域：

我正在尝试找出一种只使用CSS而不使用JS来创建以下效果的方法。最初我考虑使用内嵌border-box，但我需要能够对位置（例如，高亮区域的左上角位于距离左边缘50％处，离底部80％处），以及盒子的大小使用百分比，而且似乎border-box只能采用px值。如果图像大小发生更改，我可以使用JS来调整所有大小，但我不想这样做。 你有什么想法吗？

- abagshaw

---

我认为仅凭 CSS 是不可能实现这样的事情的（我之前尝试过类似的东西...）。但是，你可以创建一个类（JavaScript 中有类吗？）或类似的东西，比如一个 HighlightedImage ，它带有调整大小的代码，不需要任何复杂的初始化即可使用。 - tagelicht

如果必须依赖JS，我知道如何做...但我真的不想这样做，因为我不喜欢每次窗口调整大小时都运行大量代码。我希望CSS可以处理所有这些。 - abagshaw

问题在于，您试图做的是有关图片“逻辑”方面的事情（在图像中突出显示特定部分），这不是 CSS 的目的（因为 CSS 只涉及外观）。此外，使用高效的代码，例如通过延迟调整大小来减少计算机的工作量等，可以最小化计算机的工作量。另一个解决方案是通过 PHP 在服务器端创建已经突出显示的图像（您的任务似乎不需要动态突出显示）。 - tagelicht

Answer 1

您可以创建一个包含 img 的 div 元素。 然后在 div 上使用 pseudo-element ，该元素将具有大型的 box-shadow ，您可以使用 position-absolute 定位伪元素。

div {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
div:after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.6);
}

<div><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"></div>

- Nenad Vracar

---

我差点发布了相同的解决方案，但因为需要基于百分比设置框的宽度和高度而退缩了。你对此有什么建议？ - hungerstar

我认为使用百分比可以解决这个问题，不是吗？ - abagshaw

是的，它与div或父元素大小有关，当您使用display: inline-block时，它变成图像大小。 - Nenad Vracar

没错。我可能是缺少了某个属性或者将某个属性设置为了错误的值，因为百分比高度在我的代码中无法正常工作。但是在这里它显然可以正常工作。 - hungerstar

感谢您提供的解决方案。 - Avi

Answer 2

也许尝试创建4个框，位于图像的四周，重叠程度可以根据需要调整。将框的颜色设置为透明的黑色，并根据需要调整它们的大小。这些框将位于原始图像的上方。

- Tony

---

并确保方框有重叠，这样页面缩放时不会产生小块的全彩色图像。 - Jim Cote

我也在考虑这个问题 - 这似乎有点麻烦，但可能会起作用，问题是两个框重叠的角落不会变得特别暗吗？我不想要那样。 - abagshaw

@abagshaw 是可能发生这种情况的。我从未尝试过，那只是一个想法。 - Tony