不透明的 CSS 形状非矩形答案

【问题标题】：Opaque CSS Shapes Non-Rectangular不透明的 CSS 形状非矩形
【发布时间】：2019-05-09 06:04:41
【问题描述】：

我不做前端，但目前我们需要一个标题组件，我们需要在主图像上覆盖一个带有插图的非矩形条。这是我所说的一个例子：

我已经通过分层 3 个 div 获得了一个工作概念证明，但我认为它很笨拙，我正在寻找关于如何最好地利用 CSS 来实现我想要实现的目标的最佳实践建议。

我已经将一个带有支架图像的快速代码笔放在一起以显示概念证明，我们将不胜感激任何帮助

html:

 <div id="content">
  <div id="innerTop"></div>
  <div id="thing"></div>
  <div id="thing2"/>
</div>

CSS：

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

【问题讨论】：

标签： html css

【解决方案1】：

你可以使用一个元素和多个背景来实现所有这些（没有半径）

#content {
  background:
    /* Gradient or image                                              position / size*/
    url('https://www.freelogodesign.org/Content/img/logo-ex-3.png')  top center/300px 300px,
    linear-gradient(rgba(215, 217, 221, .9),rgba(215, 217, 221, .9)) 50% 150px /300px 8em,
    linear-gradient(rgba(215, 217, 221, .9),rgba(215, 217, 221, .9)) top       /100% 150px,
    url("https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg") center/cover;
  background-repeat:no-repeat;
  height:500px;
}

<div id="content">
 
</div>

使用半径可以添加更多层：

#content {
  background:
    url('https://www.freelogodesign.org/Content/img/logo-ex-3.png') top center/300px 300px,
    
    linear-gradient(rgba(215, 217, 221, .9),rgba(215, 217, 221, .9)) 50% 150px/300px 7em,
    
    linear-gradient(rgba(215, 217, 221, .9),rgba(215, 217, 221, .9)) 50% calc(150px + 7em)/250px 25px,
    radial-gradient(circle at top right,rgba(215, 217, 221, .9) 24px,transparent 25px) calc(50% - 150px + 12.5px) calc(150px + 7em)/25px 25px,
    radial-gradient(circle at top left ,rgba(215, 217, 221, .9) 24px,transparent 25px) calc(50% + 150px - 12.5px) calc(150px + 7em)/25px 25px,
    
    linear-gradient(rgba(215, 217, 221, .9),rgba(215, 217, 221, .9)) top/100% 150px,
    url("https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg") center/cover;
  background-repeat:no-repeat;
  height:500px;
}

<div id="content">
 
</div>

为了更好地理解布局，为每个渐变赋予不同的颜色，以便于识别它们：

#content {
  background:
    url('https://www.freelogodesign.org/Content/img/logo-ex-3.png') top center/300px 300px,
    
    linear-gradient(red,red) 50% 150px/300px 7em,
    
    linear-gradient(green,green) 50% calc(150px + 7em)/250px 25px,
    radial-gradient(circle at top right,blue 24px,transparent 25px) calc(50% - 150px + 12.5px) calc(150px + 7em)/25px 25px,
    radial-gradient(circle at top left ,purple 24px,transparent 25px) calc(50% + 150px - 12.5px) calc(150px + 7em)/25px 25px,
    
    linear-gradient(yellow,yellow) top/100% 150px,
    url("https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg");
  background-repeat:no-repeat;
  height:500px;
}

<div id="content">
 
</div>

【讨论】：

谢谢！我特别欣赏 sn-p 的彩色部分，这真的帮助我理解了它是如何构建的。如果我开始修改尺寸（向上、向下、缩小等），我需要相应地调整计算数字是否正确？例如，如果我将黄色条的高度缩小 20%，我会为 20% 的变化调整所有其他计算？
@salty 是的，如果您更改一个值，则需要调整所有值，这是这里的棘手部分，您需要注意像素值与百分比值，因为它们不会表现相同的。这是一本很好的阅读材料，可以更好地理解一切是如何运作的：stackoverflow.com/a/51734530/8620333

【解决方案2】：

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

#content {
  background-image:url("https://iep.challenges.org/wp-content/uploads/sites/26/2015/11/header-image-5.jpg");
  height:500px;
}
.logobar {
  height: 278px;
  display: flex;
}
.logobar-side {
  flex: 1 0 auto;
  background-color: rgba(215, 217, 221, .9);
  height: 150px;
}
.logobar-logo {
  flex: 0 0 300px;
  background-color: rgba(215, 217, 221, .9);
  border-radius: 0 0 25px 25px;
}

 <div id="content">
  <div class="logobar">
    <div class="logobar-side"></div>
    <div class="logobar-logo">
      <img class="logo" src="https://www.freelogodesign.org/Content/img/logo-ex-3.png" />
    </div>
    <div class="logobar-side"></div>
  </div>
</div>

【讨论】：

不错的方法！它仍然有一些布局标记，但它是避免徽标下半高背景的优雅解决方案

【解决方案3】：

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

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

另外，您可以使用this technique 与position:absolute + transform:translateX() 居中对齐

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

#logo img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color:rgba(215, 217, 221, .9);
  border-radius:0 0 25px 25px;
}

#logo:before, #logo:after {
  content: "";
  display: block;
  height: 150px;
  width: calc(50% - 150px);
  position: absolute;
  top: 0;
  background-color:rgba(215, 217, 221, .9);
}
#logo:before {
  left: 0;
}
#logo:after {
  right: 0;
}

<div id="content">
  <div id="logo">
  <img src="https://www.freelogodesign.org/Content/img/logo-ex-3.png" alt="Company name"/>
  </div>
</div>

为避免不同背景重叠，logo 容器有两个伪元素（:before 和 :after），一个在 logo 的每一侧。

它们的宽度是使用 calc() 计算的：width: calc(50% - 150px);（请参阅浏览器支持here）

CodePen：https://codepen.io/anon/pen/wbKROz

【讨论】：