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

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

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

有没有办法用 CSS 来做到这一点，或者我应该只使用画布？

例子 -

http://dabblet.com/gist/1566209 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;
}

SUMMARY:

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

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

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

这是小提琴：http://jsfiddle.net/pixelass/nPjQh/4/ http://jsfiddle.net/pixelass/nPjQh/4/

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

这些示例中的每一个仅使用一个div element

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

位置=绝对；

顶部=圆高度/-2；

左=圆高度/-2； //（左=上）

旋转=180度；

不透明度=AofBackground值；

bgColor = 背景的RGB值；

#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/ 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...圆圈是一个“吃豆人”形状：http://jsfiddle.net/pixelass/nPjQh/14/ http://jsfiddle.net/pixelass/nPjQh/14/

管理圆的偏移

看一下这些处理圆偏移的示例（不使用伪元素)

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

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

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

偏移量如何发挥作用？

控制background-size与top and left

Rules:

顶部=左侧；

背景大小 = 元素高度 * 2 + 顶部 * 2;

看这花（也只有一朵）<div>带伪元素） 这background-size比圆还大。这会在底部产生绿叶

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

当前的问题

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

如果不使用帖子顶部示例中所示的另一个图层，内容将是透明的。因此，如果您只需要圆圈内的图像，上面的示例就可以正常工作。

如何解决这个问题

如果您需要画布或圆圈内的另一个 div，则必须将圆圈放在 div 上并将所需的 div 放在圆圈上

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

稍微改变一下，它就会工作得很好。从小提琴中获取代码

不同形状/高级造型

如果您使用具有平坦侧面的不同形状，您甚至可以在两个 div 的总和周围放置一个边框..或者甚至添加一个框阴影

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

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

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

对圆应用边框

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

更多示例：

div 周围有四个圆圈

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

Markup:

<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/ http://jsfiddle.net/pixelass/nPjQh/31/

Markup:

<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>