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.但是我需要做一些数学运算来使边框宽度和偏移恰好是图像宽度（或高度）的一半。我可以和萨斯一起做吗？

萨斯：

.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颜色应用于图像，它将被此图像遮挡，并且透明度的任何变化都会影响整个图像。

彩色与指南针叠加响应图像？

1 个答案: