文章/答案/技术大牛

发布

社区首页 >问答首页 >防止rgba背景重叠

问防止rgba背景重叠
EN

Stack Overflow用户

提问于 2018-04-25 23:57:44

回答 2查看 834关注 0票数 2

我正在尝试从两个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>

背景再次重叠..。

你知道该怎么做吗？

谢谢

css

回答 2

Stack Overflow用户

发布于 2018-04-26 00:27:27

一般来说，避免使用<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>

票数 2

Stack Overflow用户

发布于 2018-04-26 00:18:22

我附加了一个代码片段，将您的2个图表添加到每个相应的div中。现在，您可以通过调整“grid-template-column”的百分比来决定是将这两个图分开还是相互接触。如果您将第一个%值从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>

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50026622

复制

相似问题

问防止rgba背景重叠
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止rgba背景重叠EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止rgba背景重叠
EN