如何处理两个重叠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

规则:

顶部=左;

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

我认为唯一的办法就是分别做不透明度,

例如 http://dabblet.com/gist/1566278