如何处理两个重叠div的“双重不透明度”

Question

我有两个div，都是0.6不透明度。我需要它们重叠但保持不透明度而不是创建新的组合不透明度级别。我无法使用图像。

编辑 - 小圆圈应该有一个画布元素。不确定伪元素是否是最佳解决方案。

无论如何用CSS做这个，或者我应该只使用画布吗？

示例 -

http://dabblet.com/gist/1566209

HTML：

<div id="foo">
    <div id="bar">
    </div>
</div>

CSS：

/**
 * Double Opacity
 */
body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
}

Answer 1

---

<强>概要

---

根据需要，它可能很棘手，但基本方法非常简单。

---

---

我在这里写了一篇完整的文章：

可能更容易阅读。

http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border/

---

---

这种方法与我的第一个想法有点不同......但这有相同的结果。

1. 我为圆圈制作了一个黑色/透明图案并将其设置为 :before。
2. 然后转换圈rotate(180deg)并移动以适应 <div>。
的一角
3. 然后我将该圈子的opacity设置为0.6。
4. <div>本身不受opacity。
的影响
5. 接下来，我添加了:after元素并将图片设为background （如果需要，你可以通过js控制这个）
6. 我为图片添加了一些效果（border-radius，box-shadow， border）表明这个元素是多么容易和独立 控制。
7. 我使用较浅的背景并将opacity设置为0.3以显示 结果

这里的好词：http://jsfiddle.net/pixelass/nPjQh/4/

查看此版本的一些疯狂结果： http://jsfiddle.net/pixelass/nPjQh/5/

这些示例中的每一个仅使用单个div元素

基本规则。 （这些规则“可以”用于使用js创建动态行为

position = absolute;

top = circleHeight / -2;

left = circleHeight / -2; //（左=顶部）

rotation = 180deg;

opacity = valueAofBackground;

bgColor = valueRGBofBackground;

#inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.3);
    padding:20px;
    border-radius: 20px;
    border-top-left-radius: 0;
}
#inner:before {
    content: "";
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    height: 40px;
    width: 40px;
    border-radius: 40px;
    position: absolute;
    top: -20px;
    left: -20px;
    -webkit-transform: rotateZ(180deg);
    opacity:0.3;
}
#inner:after {
    content: "";
    background: url('http://lorempixel.com/10/10/sports/1/') no-repeat;
    background-position:0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    position: absolute;
    top: -6px;
    left: -6px;
    -webkit-box-shadow: 0 0 10px rgb(255,255,255);
    border: 1px rgb(255,255,255) solid;

}

---

更好的解释

---

原始评论版 http://jsfiddle.net/pixelass/nPjQh/10/

请参阅以下代码中的评论

#inner {
background: rgba(0,0,0,0.5) /*this is the full color-code of the div (with alpha)*/
}
#inner:before {
    /*the solid color of the circle = rgbValue of the div*/
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    /*opacity of the circle = alpha of the div*/
    opacity: 0.5;
}

此示例具有完全透明的div ...圆圈是“pacman” - 形状：http://jsfiddle.net/pixelass/nPjQh/14/



---

管理圈子的偏移量

---

查看处理圆圈偏移的这些示例（不使用伪元素）

OP代码的1：1副本（15px偏移量）：http://jsfiddle.net/pixelass/nPjQh/12/

偏移量小很多（5px）：http://jsfiddle.net/pixelass/nPjQh/13/

（内容与圆圈具有相同的不透明度）

偏移如何运作？

控制background-size与top和left

<强>规则：

top = left;

background-size = elementHeight * 2 + top * 2;

看看花（它也只有一个<div>有伪元素） background-size大于圆圈。这会在底部创造绿叶

http://jsfiddle.net/pixelass/nPjQh/15/



---

当前问题

---

看到这个小提琴：http://jsfiddle.net/pixelass/nPjQh/16/

如果没有使用帖子顶部示例中所示的其他图层，则内容将是透明的。因此，如果您只需要圆圈内的图像，则上述示例将正常工作。



如何解决这个问题

如果您需要在圆圈内使用画布或其他div，则必须将圆圈放在div上并将所需的div层叠在圆圈上

看到这个小提琴：http://jsfiddle.net/pixelass/nPjQh/17/

稍微改变一下，它会正常工作。从FIDDLE获取代码



---

不同形状/高级造型

---

如果你使用不同形状的平面边，你甚至可以在两个div的总和周围放一个边框..甚至可以添加一个框阴影

仍然使用....的简单标记。

<div id="foo">
    <div id="bar">
    </div>
</div>

请参阅框阴影的小提琴：http://jsfiddle.net/pixelass/nPjQh/21/



---

在圆圈上应用边框

---

使用-webkit-mask-image我们可以为圆圈添加边框。 http://jsfiddle.net/pixelass/nPjQh/24/



---

更多示例：

---

div周围的四个圈子

http://jsfiddle.net/pixelass/nPjQh/25/

标记：

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
</div>



使用此技术制作工具提示

http://jsfiddle.net/pixelass/nPjQh/31/

标记：

<div id="foo">
    <div id="bar"></div>
    I am a pure css tooltip with a semi-transparent background and a black border. <br/>
    My width is static an my height is dynamic...
</div>

Answer 2

我认为唯一的方法就是单独进行不透明度，

e.g。 http://dabblet.com/gist/1566278

Answer 3

这个怎么样：http://jsfiddle.net/rudiedirkx/TqRCw/

（Dabble的编辑很糟糕!!）

不能仅使用伪元素=（

只能使用伪元素来完成！请参阅pixelass的回答。 CSS3是一项要求。

Answer 4

修订答案

This fiddle 与IE9 兼容，并解决了原始答案中所需的背景重复。它确实使用伪元素来生成圆。这个解决方案消除了pixelass的“pacman”想法，而不是使用较新的背景渐变css来生成，它使用较旧的（和little used or understood）clip属性将圆圈分成两部分。这解决了你的圈子没有在角落里“居中”的问题。

#foo {
    height:150px;
    width:250px;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:40%;
    top:20%;
}

#bar {
    height:40px;
    width:40px;
    position:absolute;
    top:-15px;
    left:-15px;
    line-height: 40px;
}

#bar:before,
#bar:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#bar:before {
    clip: rect(0 40px 15px 0);
}

#bar:after {
    clip: rect(15px 15px 40px 0);
}

原始答案

你可以这样做（see fiddle）。它推动下面的圆圈并“覆盖”与伪元素重叠的部分，以重新建立身体的背景颜色：

body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
z-index: -1;
}

#bar:after {
    content: '';
    display: block;
    background: green;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
}

Answer 5

我已经创建了一个Q / A来处理这种情况以及这种重叠元素的“悬停”。

Overlapped elements with opacity and handling the 'hover' on those

解决方案基本上是在父级别设置不透明度，而不是直接在子元素上设置，并使用JS在悬停时切换它们。

HTML

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

JS

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

CODEPEN

希望这会有所帮助。