35

我有两个 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;
}
4

5 回答 5

44

概括：

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

这种方法与我最初的想法有点不同……但这具有相同的结果。

  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 创建动态行为）

位置=绝对；

顶部 = 圆形高度 / -2；

左=圈高/-2；//（左=上）

旋转 = 180 度；

不透明度 = 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的......圆圈是一个“吃豆人” - 形状：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

规则：

上=左；

背景尺寸 = elementHeight * 2 + top * 2;

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

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

一个div做一朵花

当前问题

看到这个小提琴：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/

圆形元素的边框

更多示例：

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>

4圈

使用此技术制作工具提示

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>

CSS 工具提示

于 2012-01-05T18:00:29.390 回答
12

我认为唯一的方法是单独做不透明度，

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

于 2012-01-05T17:35:00.680 回答
2

这个怎么样：http: //jsfiddle.net/rudiedirkx/TqRCw/

（Dabble 的编辑很烂！！）

可悲的是，仅使用伪元素无法做到这一点=（

它可以只用伪元素来完成！请参阅pixelass的答案。不过 CSS3 是一个要求。

于 2012-01-05T18:23:12.893 回答
2

修订答案

这个小提琴与IE9 兼容，并解决了我原始答案中所需的背景重复问题。它确实使用伪元素来生成圆。这个解决方案衍生出了 pixelass 的“pacman”想法，只是没有使用较新的背景渐变 css 来生成，而是使用较旧的（并且很少使用或理解的）clip属性将圆圈分成两部分。这解决了你的圈子没有在角落“居中”的问题。

#foo {
    height:150px;
    width:250px;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:40%;
    top:20%;
}

#bar {
    height:40px;
    width:40px;
    position:absolute;
    top:-15px;
    left:-15px;
    line-height: 40px;
}

#bar:before,
#bar:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#bar:before {
    clip: rect(0 40px 15px 0);
}

#bar:after {
    clip: rect(15px 15px 40px 0);
}

原始答案

你可以这样做（见小提琴）。它推动下面的圆圈并“覆盖”与伪元素重叠的部分以重新建立主体的背景颜色：

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;
z-index: -1;
}

#bar:after {
    content: '';
    display: block;
    background: green;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
}
于 2012-01-05T21:17:31.530 回答
0

我创建了一个 Q/A 来处理这种情况以及此类重叠元素的“悬停”。

具有不透明度的重叠元素并处理那些.

解决方案基本上是在父级别设置不透明度，而不是直接在子元素上设置，并在悬停时使用 JS 切换它们。

HTML

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

JS

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

编解码器

希望这可以帮助。

于 2018-04-18T13:30:30.357 回答