Question

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

我希望能够选择某个透明元素，并隐藏两个相交的半透明元素之一。也就是说，你最终会得到类似的东西：

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

我在下面放了一个示例代码。我希望能够隐藏带有“随机线”类的行（并且不会隐藏带有“其他随机行”类的行！）在标题为“对象2”的div后面。有没有人对我如何做到这一点有任何想法，或者它是否尽可能吗？

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

要点：

掩码取你的对象的位置，用你的容器背景的副本隐藏它（向左平移以保持与原始背景相同的位置）。

E.G：

对象是150px左
面膜也是150px
背景也是150px，因为它在掩码内，我希望它与主容器对齐，所以我要求它保持-150px。这样，面具会尝试重现原始背景，覆盖它。
我们现在可以使用z-index来隐藏/显示特定的随机行

这是您的updated Codepen

Answer 2

你可以在大多数现代浏览器上工作（在某种程度上），IE除外。

诀窍不是使用透明度，而是混合。当您设置强光的混合模式时，叠加层中的颜色灰色会显示为透明。

在下面的演示中，它只是test3元素的z-index产生差异。

＆＃13;

.test1 {
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
	background-color: white;
}

.base {
	position: absolute;
	z-index: 1;
	mix-blend-mode: hard-light;
}

.test2 {
	width: 200px;
	height: 100px;
	top: 50px;
	border: solid 1px red;	
	position: absolute;
	background-color: gray;
	z-index: 10;
}

.test3 {
	width: 40px;
	height: 200px;
	top: 0px;
	border: solid 1px blue;	
	position: absolute;
	mix-blend-mode: hard-light;
	background-color: rgba(255,0,0,0.5);
}

#test31 {
	left: 50px;
	z-index: 15;
}
#test32 {
	left: 120px;
	z-index: 5;
}

＆＃13;

<div class="test1">
	<div class="base">
		<div class="test2">
		</div>
		<div class="test3" id="test31">
		</div>
		<div class="test3" id="test32">
		</div>
	</div>
</div>

＆＃13;

当用透明div重叠时，有选择地隐藏背景元素

2 个答案: