Question

我不做前端，但是目前我们需要一个标头组件，在该组件中，我们需要在英雄图像上覆盖一个带有插图的非矩形条。这是我正在谈论的示例：

我已经通过分层3个div获得了有效的概念证明，但是我认为这很过时，我正在寻求有关最佳实践的建议，以帮助我最大程度地利用CSS来实现自己的目标。< / p>

我已将带有持有人图像的快速密码笔放在一起，以显示概念证明，任何帮助将不胜感激

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

Answer 1

这种flexbox方法可能比float更好。

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

Answer 2

您可以使用一个元素和多个背景（无半径）

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

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

为避免不同的背景重叠，徽标容器具有两个伪元素（：before和：after），徽标的每一侧都有一个。

这些元素的宽度是使用calc（）：width: calc(50% - 150px);（请参见浏览器支持here）

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

不透明的CSS形状为非矩形

3 个答案: