Question

我试图用两个div制作一个形状，但是我无法防止背景颜色重叠。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

因此，我尝试仅使用rgba

将不透明度应用于背景

＆＃13;

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;
}

＆＃13;

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

＆＃13;

背景再次重叠......

关于如何做到这一点的任何想法？

由于

Answer 1

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

替代HTML中嵌入的SVG：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我附上了一个代码段，将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>

防止rgba背景重叠

2 个答案: