css - 如何处理两个重叠的div的 'double opacity'

Question

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

编辑-小圆圈应该在其中包含 Canvas 元素。不确定伪元素是否是最佳解决方案。

无论如何，使用CSS可以做到这一点，还是我应该只使用canvas？

例子-

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

摘要:

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

这种方法与我的第一个想法有点不同……但是结果是一样的。

我为圆圈制作了黑色/透明图案并将其设置为:before。

然后将圆转换为rotate(180deg)并移动以适合<div>的角落。

然后，我将该圆圈的opacity设置为0.6。

<div>本身不受opacity的影响。

接下来，我添加了:after元素，并将图像作为background(如果需要，您可以通过js控制)

我为图片添加了一些效果(border-radius，box-shadow，border)显示此元素可以多么容易和独立
受控。

我使用了较浅的背景，并将opacity设置为0.3以显示
结果

在这里:http://jsfiddle.net/pixelass/nPjQh/4/
查看此版本可获得一些疯狂的结果: http://jsfiddle.net/pixelass/nPjQh/5/
这些示例中的每一个仅使用单个div元素
基本规则。 (这些规则“可以”用于通过js创建动态行为)
位置=绝对;
顶部= circleHeight / -2;
左= circleHeight / -2; //(left = top)
旋转= 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/

管理圆的偏移量

查看这些处理圆弧偏移的示例(不使用PSEUDEO-ELEMENTS )
OP代码的1:1副本(偏移15px):http://jsfiddle.net/pixelass/nPjQh/12/
具有较小的偏移量(5px):http://jsfiddle.net/pixelass/nPjQh/13/
(内容与圈子具有相同的不透明度)
偏移量如何工作？
控制background-size和top和left 规则:
顶部=左侧;
background-size = elementHeight * 2 + top * 2;
看一下花(它也是只有一个带有伪元素的<div>)background-size大于圆圈。在底部创建绿色的叶子
http://jsfiddle.net/pixelass/nPjQh/15/

当前问题

看到这个 fiddle :http://jsfiddle.net/pixelass/nPjQh/16/
如果不使用帖子顶部示例中的其他层，则内容将是透明的。因此，如果您仅需要圆圈内的图像，则上述示例可以正常工作。

如何解决此问题
如果您需要在圆内添加 Canvas 或其他div，则必须将圆放在div上，然后在圆上分层放置所需的div
看到这个 fiddle :http://jsfiddle.net/pixelass/nPjQh/17/
稍微改变一下就可以了。从该平台获取代码

不同形状/高级样式

如果您使用其他具有平坦侧面的形状，则可以在两个div的总和周围放置边框。甚至可以添加阴影
仍在使用...的简单标记

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

请参见 fiddle 中的盒子阴影: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>