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

前端之家收集整理的这篇文章主要介绍了css – 如何处理两个重叠的div的“双重不透明度”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个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.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/

改变一点,它会工作正常。从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/

英文“

围绕着四圈

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>
原文链接:https://www.f2er.com/css/219611.html

猜你在找的CSS相关文章