Html 不透明CSS形状非矩形

我不做前端，但目前我们有一个标题组件的要求，我们需要覆盖一个非矩形条与插入图像的英雄形象。下面是我所说的一个例子：

我有一个工作的概念证明，通过分层3个div，但我认为这是janky，我正在寻找关于如何最好地利用CSS实现我的目标的最佳实践的建议

我已经把一个快速代码笔与持有人的形象，以显示证明的概念，任何帮助将不胜感激

html:

---

这种flexbox方法可能比浮动方法更好

#内容{
背景图像：url（“https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg");
高度：500px；
}
.标识栏{
高度：278px；
显示器：flex；
}
.标识栏侧{
弹性：10自动；
背景色：rgba（215217221.9）；
高度：150像素；
}
.标志栏标志{
flex:0300px；
背景色：rgba（215217221.9）；
边界半径：0 0 25px 25px；
}

---

你的方法很好。这里的主要挑战是防止徽标的背景与顶部水平条的背景重叠

您可以使用CSS（之前/之后）避免不必要的标记

此外，您还可以使用将中心对齐到

位置：绝对
+
变换：translateX（）


#内容{
背景图像：url（“https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg");
高度：500px；
位置：相对位置；
}
#标志img{
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
背景色：rgba（215217221.9）；
边界半径：0 0 25px 25px；
}
#logo:before，#logo:after{
内容：“；
显示：块；
高度：150像素；
宽度：计算（50%-150px）；
位置：绝对位置；
排名：0；
背景色：rgba（215217221.9）；
}
#标志：以前{
左：0；
}
#标志：之后{
右：0；
}
您可以使用一个元素和多个背景（不带半径）实现所有这些


#内容{
背景：
/*渐变或图像位置/大小*/
url（'https://www.freelogodesign.org/Content/img/logo-ex-3.png“）上止点/300px 300px，
线性梯度（rgba（215217221.9），rgba（215217221.9））50%150px/300px 8em，
线性梯度（rgba（215217221.9），rgba（215217221.9））顶部/100%150px，
网址（“https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg）中心/盖；
背景重复：无重复；
高度：500px；
}

方法不错！它仍然有一些布局标记，但这是一个优雅的解决方案，以避免在logo下的半高背景谢谢！我特别欣赏彩色部分片段，它确实帮助我理解了这是如何构建的。如果我开始修改尺寸（上移、下移、缩小等），我是否需要相应地调整计算数字？例如，如果我将黄色条的高度缩小20%，我会调整所有其他计算值以实现20%的偏移？@salty是的，没错，如果您更改一个值，您需要调整所有值，这是一个棘手的部分，您需要注意像素与百分比值，因为它们的行为不同。以下是一本很好的读物，可以更好地理解一切是如何工作的：
 <div id="content">
  <div id="innerTop"></div>
  <div id="thing"></div>
  <div id="thing2"/>
</div>

#content {
  background-image:url("https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg");
  height:500px;
}

#thing {
  width:100%;
  height:30%;
  background-color:rgba(215, 217, 221, .9);
}

#thing2 {
  margin: 0 auto;
  width:300px;
  height:8em;
  background-color:rgba(215, 217, 221, .9);
  border-radius:0 0 25px 25px;
}
#innerTop {
  float:left;
  width:100%;
  height:100%;
  background-image: url('https://www.freelogodesign.org/Content/img/logo-ex-3.png');
  background-repeat: no-repeat;
  background-position: top; 
  background-size: 300px 300px;
}