html - 覆盖透明div时有选择地隐藏背景元素

Question

我在图案背景上有一些透明元素和一些半透明元素。

我希望能够选取某个透明元素，并在两者相交的地方隐藏其中一个半透明元素。也就是说，你最终会得到类似的东西:

    ==========   ===========   ===========   ===========
    |        |   |         |   |         |   |         |
----|--------|---|         |---|---------|---|---------|---
----|--------|---|---------|---|---------|---|---------|---
    |        |   |         |   |         |   |         |
    ==========   ===========   ===========   ===========

我在下面放了一个示例代码笔。我希望能够在标题为“Object 2”的 div 后面隐藏类为“random-line”的行(而不是隐藏类为“other-random-line”的行!)。有没有人对我如何着手做这件事有任何想法，或者这是否可能？

http://codepen.io/anon/pen/GgzeGP

谢谢!

Answer 1

由于您没有要求避免 JS/jQuery 解决方案，这里有一种方法可以做到(可以对其进行改进以获得更好的结果)。

---

1 - 我创建了一个包含您复制的背景的蒙版:

HTML

<div class="maskContainer">
    <div class="mask">
    <div class="background"></div>
    </div>
</div>

CSS

.background {
    position: absolute;
    display: inline-block;
    background: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2) 10px,
      rgba(0, 0, 0, 0.3) 10px,
      rgba(0, 0, 0, 0.3) 20px
    );
    top:0px;
}
.maskContainer{
    z-index: 2;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
 }
 .mask{
    position:relative;
    top:200px;
    overflow:hidden;
    padding: 2em;
    border: 1px solid #afa;
    margin: 0 1em;
 }

JS

var containerWidth = $(".container").width();
var containerHeight = $(".container").height();

$(".background").css({
  'width':containerWidth+'px',
  'height':containerHeight+'px',
});

---

2 - 这个掩码使用 jquery 获取你想要的对象的大小和位置(以及一些其他的东西来处理你的对象填充/边距):

JS

var selectedObjWidth = $(".object.selected").width();
var selectedObjHeight = $(".object.selected").height();
var selectedObjPosX = $(".object.selected").position().left;
var selectedObjPosY = $(".object.selected").position().top;

$(".mask").css({
  'width':selectedObjWidth+'px',
  'height':selectedObjHeight+'px',
  'left':selectedObjPosX+'px',
  'top':selectedObjPosY+'px'
});


var maskMargin = $(".mask").css("margin-left");
maskMargin = maskMargin.split("px");
var realMaskMargin = maskMargin[0];

var maskPosX = $(".mask").position().left+parseInt(realMaskMargin)+1;

$(".background").css({
  'left':'-'+maskPosX+'px'
});

---

总结:

mask 占据您的对象的位置，用容器背景的副本隐藏它(向左平移以保持与原始背景相同的位置)。

例如:

• 对象在左边 150px

• 蒙版也剩150px

• 背景也剩余 150 像素，因为它在 mask 内，我希望它与主容器对齐，所以我要求它剩余 -150 像素。这样， mask 会尝试重现您的原始背景，并覆盖它。

• 我们现在可以使用 z-index 来隐藏/显示特定的随机线

---

这是您的 updated Codepen