编辑 – 小圆圈应该有一个画布元素。不确定假元素是否是最佳解决方案。
有没有使用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.6);
position:absolute;
left:40%;
top:20%;
}
#bar{
height:40px;
width:40px;
background:rgba(0,0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
}
解决方法
根据需要，它可能是棘手的，但基本的方法是很直接的。
我在这里写了一篇关于它的整篇文章：
它可能会更容易阅读。
http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border/
这种方法与我的第一个想法有点不同，但是这样做也是一样的。
>我做了一个黑色/透明的图案为圈子和设置它
：之前。
>然后将圆转动旋转(180度)并移动以适应
< div>的角落。
>然后我将该圆的不透明度设置为0.6。
>< div>本身不受不透明度的影响。
>接下来我添加了：after元素并将图像作为背景
(如果需要，可以通过js来控制)
>我向图像添加了一些效果(border-radius，Box-shadow，
边界)，以显示这个元素如何容易和独立
受控。
>我使用较浅的背景，并将不透明度设置为0.3来显示
结果
这里的作品：http://jsfiddle.net/pixelass/nPjQh/4/
看这个版本的一些疯狂的结果：http://jsfiddle.net/pixelass/nPjQh/5/
这些例子中的每一个仅使用单个div元素
基本规则。 (这些规则可以“用于用js创建一个动态行为)
position = absolute;
top = circleHeight / -2;
left = circleHeight / -2; //(left = top)
旋转= 180度;
opacity = valueAofBackground;
bgColor = valueRGBofBackground;
#inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(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) 50%,0)),-webkit-linear-gradient(0deg,transparent 50%,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) solid;
}
更好的说明
原始评论版本
http://jsfiddle.net/pixelass/nPjQh/10/
请参阅下面代码中的注释
#inner {
background: rgba(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%,0));
/*opacity of the circle = alpha of the div*/
opacity: 0.5;
}
这个例子有一个完整的透明div …圆是一个“pacman” – 形状：http://jsfiddle.net/pixelass/nPjQh/14/
管理圈子的偏移
看看处理圆偏移的这些例子(NOT USING PSEUDEO-ELEMENTS)
1：1的OP码(15px offset)：http://jsfiddle.net/pixelass/nPjQh/12/
有很小的偏移(5px)：http://jsfiddle.net/pixelass/nPjQh/13/
(内容与圆圈的透明度相同)
偏移如何工作？
控制背景大小相对于顶部和左侧
规则：
top = left;
background-size = elementHeight * 2 top * 2;
看花(它也只有一个&div。>与伪元素)
背景大小大于圆。它在底部创建绿色叶子
http://jsfiddle.net/pixelass/nPjQh/15/
当前问题
看到这个小提琴：http://jsfiddle.net/pixelass/nPjQh/16/
如果没有使用另一层，如在帖子顶部的示例中看到的内容将是透明的。所以如果你只需要圈子里面的图像，上面的例子就可以正常工作了。
如何解决这个问题
如果您需要一个画布或圆圈内的另一个div，那么您必须将圆圈放在div上，并将所需的div分层
看到这个小提琴：http://jsfiddle.net/pixelass/nPjQh/17/
不同形状/高级造型
如果您使用平面不同的形状，甚至可以在两个div之间加一个边框..甚至添加一个盒子阴影
仍然使用….的简单标记
<div id="foo">
<div id="bar">
</div>
</div>
看到盒子阴影的小提琴：http://jsfiddle.net/pixelass/nPjQh/21/
向圆圈应用边框
使用-webkit-mask-image我们可以在圆圈中添加一个边框。
http://jsfiddle.net/pixelass/nPjQh/24/
英文“
围绕着四圈
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>
