当使用透明div叠加时，选择性地隐藏背景元素 [英] Selectively hide background elements when overlayed with transparent div

问题描述

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

我想要能够选择一个透明的元素，两个相交的半透明元素。也就是说，你最终会得到类似的结果：

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

我在下面放了一个例子。我想能够隐藏线的类random-line（而不是隐藏类的other-random-line！）后面标题为对象2的div。任何人都有任何想法，我如何可以这样做，或者它是否是可能的？

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

谢谢！

解决方案

由于你没有要求避免使用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'
} 
  

---

摘要：

掩码占据你的对象的位置，用你的容器背景的副本（它被翻译为保持与原始背景相同的位置）。

EG：

• 对象为150像素


< <>
容器，所以我问它是-150px左。



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

  
  

---

这是您的更新Codepen

I've got some transparent elements and some translucent elements on a patterned background.

I want to be able to pick a certain transparent element, and hide one of the translucent elements where the two intersect. Ie so you would end up with something like:

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

I've put an example codepen below. I'd like to be able to hide the line with class "random-line" (and not hide the line with class "other-random-line"!) behind the div titled "Object 2". Does anyone have any ideas on how I could go about doing this, or whether it is even at all possible?

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

Thanks!

解决方案

Since you didn't ask to avoid JS/jQuery solution, here is a way to do (that can be refined for a better result).

---

1 - I've created a mask that contains your duplicated background:

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 - This mask gets the size and position of your desired object with jquery (and some other stuffs to deal with your object padding/margin):

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'
});

---

Summary:

The mask takes the position of your Object, hides it with a duplicate of your container background (which is translated left to keep the same position as your original background).

E.G:

• Object is 150px left

• Mask is 150px left too

• Background is also 150px left because it is within the mask, and I want it to be aligned with the main container, so I ask it to be -150px left. This way, the mask try to reproduce your original background, overriding it.

• We can now play with z-index to hide/show specific random-line

---

Here is your updated Codepen

这篇关于当使用透明div叠加时，选择性地隐藏背景元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！