防止rgba背景重叠[重复]答案

【问题标题】：Prevent rgba background from overlapping [duplicate]防止rgba背景重叠[重复]
【发布时间】：2018-10-06 04:29:40
【问题描述】：

我正在尝试从两个 div 中创建一个形状，但在防止背景颜色重叠时遇到了问题。

我设法通过对父母应用不透明度来做到这一点，但所有孩子也都具有这种不透明度。

body{background:white;
padding:0px;
margin:0px}

#baz{
opacity:0.5}

#foo{
  top:10px;
  left:60px;
height:80px;
width:200px;
background: black;
position:absolute;
border-radius: 0 40px 40px 0  
}

#bar{
height:100px;
width:100px;
background: black;
border-radius:100px;
position:absolute;
}

<div id="baz">
<div id="foo">

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

因此，我尝试仅使用 rgba 将不透明度应用于背景

body{background:white;
padding:0px;
margin:0px}

#baz{
background-color: rgba(0,0,0,0.5);
}

#foo{
  top:10px;
  left:60px;
height:80px;
width:200px;
background: inherit;
position:absolute;
border-radius: 0 40px 40px 0  
}

#bar{
height:100px;
width:100px;
background: inherit;
border-radius:100px;
position:absolute;
}

<div id="baz">
<div id="foo">

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

背景又重叠了……

你知道怎么做吗？

谢谢

【问题讨论】：

你可以对重叠区域使用剪辑蒙版，否则只需使用 png 或 svg
您的目标是让 2 个图表不相互接触吗？
@Pete 你会怎么做？
css-tricks.com/clipping-masking-css
@Toolbox 我想隐藏两个div重叠的事实

标签： css

【解决方案1】：

一般来说，避免使用<div> 做<svg> 的工作。

#badge {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 100"><g opacity="0.5"><circle cx="50" cy="50" r="50" fill="#000" /><rect x="40" y="10" width="220" height="80" rx="40" fill="#000" /></g></svg>');
  width: 260px;
  height: 100px;
}

<div id="badge">
  Content Here
</div>

在 HTML 中嵌入 SVG 的替代方案：

#badge {
  width: 260px;
  height: 100px;
  position: relative;
  z-index: 0;
}
#badge>svg {
  position: absolute;
  z-index: -1;
}

<div id="badge">
  <svg viewBox="0 0 260 100">
    <g opacity="0.5">
      <circle cx="50" cy="50" r="50" fill="#000" />
      <rect x="40" y="10" width="220" height="80" rx="40" fill="#000" />
    </g>
  </svg>
  Content Here
</div>

【讨论】：

我想在这种情况下使用div，因为水平div的宽度取决于内部内容
啊，现在这确实使事情变得有点复杂......在这种情况下，你可能想做一些类似我上面的第二个 sn-p 的事情，但是使用你的 <div> 构造而不是 SVG -也就是说，将它放在您的容器中并对其应用不透明度，并使用z-index: -1 将其放置在元素的背景中。
不确定我是否理解您的建议：/

【解决方案2】：

我附加了一个代码 sn-p，将您的 2 个图表添加到每个相应的 div 中。现在，您可以通过调整“grid-template-columns”的百分比来决定是否要分开 2 个图表或相互接触。如果您将第一个 % 值从 20% 降低到 5%，您的 2 个图表将作为您的图片。

/* Grid-base */

.grid-1 {
  display: grid;
  grid-template-columns:
  20%
  30%
  1fr
  ;
  grid-template-rows:
  100px
  ;
  grid-template-areas:
  "left-area mid-area right-area"
  ;
}

.left-area {
  grid-area: left-area;
  background-color: grey;
  border-radius: 50px;
  width: 100px;
}

.mid-area {
  grid-area: mid-area;
  background-color: grey;
  border-radius: 0px 50px 50px 0px;
  margin: 10px 0px 10px 0px;
}

.right-area {
  grid-area: right-area;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="grid-1">

<div class="left-area"></div>
<div class="mid-area"></div>
<div class="right-area"></div>

</div>

</script>
</body>
</html>

【讨论】：

这不是我想要做的，我希望两个 div 具有 0.5 的不透明度背景并将它们重叠。问题是重叠变得可见
所以你想让它看起来像一个形状？
是的，就像在第一个代码 sn-p 中一样，但没有不透明度继承