css - 使用 Compass 颜色覆盖响应图像？

Question

我无法控制我正在设置样式的 HTML，因此每个 img 都嵌套在一个 li 中。 li 有填充，由于复杂的响应式网格系统，无法将其更改为边距。而且，是的，由于它是响应式的，图像的大小可能会改变。
这是演示:Play with this gist on SassMeister.

萨斯:

.active {
  border: grey solid 4px;
  opacity: .2;
 }

 ul {
  list-style:none;
}

li {
  width: 20%;
  padding: 5%;
  display: inline-block;
 }

img {
  width: 100%;
}

#thumbs {
  width: 100%;
}

HTML:

<div id="thumbs">
  <ul>
    <li>
      <img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
  </ul>
</div>

如何在 .active 图像上制作颜色叠加效果？

由于填充，应用于 li 父级的背景颜色很乱，我无法弄清楚如何创建与图像大小相同的伪元素。

编辑:我想也许我可以用偏移边框实现这一点，参见 this gist on SassMeister.但是我需要做一些数学运算来使边框宽度和偏移正好是图像宽度(或高度)的一半。我可以用 Sass 做到这一点吗？

萨斯:

.active {
  border: grey solid 4px;
  opacity: .2;
  outline: 160px solid rgba(255,0,0,0.7);
  outline-offset: -160px;
 }


 ul {
  list-style:none;
}

li {
  width: 20%;
  padding: 5%;
  display: inline-block;
 }

img {
  width: 100%;
}

#thumbs {
  width: 100%;
}

HTML:

<div id="thumbs">
  <ul>
    <li>
      <img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
    <li>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
    </li>
  </ul>
</div>

Answer 1

我有一些工作，try this on for size .仅当您可以将类添加到 <li> 时它才有效.

不幸的是，CSS 不允许任何形式的父选择，所以你不能说'给我任何 <li>包含 <img>同类<active> :( 那是 javascript 地盘

除非你想用 javascript 添加叠加层，否则为什么不将你想要的色调应用到父元素 <li> , 然后替换 padding与 margins所以颜色不会突出，因为它被里面的图像遮住了。然后申请 opacity到 img.active就像你一样。我认为您的第一个想法是正确的。

您真正克服不透明度的唯一控制是元素本身或它的背景颜色，如 rgba(red, blue, green, opacity) .这意味着如果您将 BG 颜色应用到图像，它将被该图像遮挡，并且对透明度的任何更改都会影响整个图像。