Question

基本上是带有图案叠加的背景图像，仅覆盖图像的一半。在模式上有一些文字，可能是一个链接。

以下是我到目前为止所尝试的内容。我能够实现外观，但不确定它是否是正确的做事方式。

HTML：

<section>
  <div class="my-custom-container">
    <div class="banner">
      <nav class="navbar navbar-default mynavbar">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <?php if ( function_exists( 'the_custom_logo' ) ) {
              the_custom_logo();
            }?>
          </div>
          <?php wp_nav_menu(array(
            'theme_location' => 'top',
            'menu_class'     => 'collapse navbar-collapse',
            'container_id'   => 'myNavbar',
            'items_wrap'     => '<ul class="nav navbar-nav navbar-right">%3$s</ul>'
          ));?>
         </div>
       </nav>
     </div>
   </div>
</section>

CSS：

@media (min-width: 1200px) {
  section {
    background-color: #4E4F56;
  }
  .my-custom-container {
    width:1366px;
    margin: 0px auto;
  }
  .banner {
    background: url('img/homepage-bg-banner.jpg') no-repeat center top;
    background-size: cover;
    min-height: 777px;
    position: relative;
    width: 100%;
  }
  .mynavbar {
    top: 55px;
    background-color: transparent !important;
    border-color: transparent !important;
  }
  .my-custom-container:before, .my-custom-container:after {
    background: url("img/pattern-iq4s-525.png") repeat-y;
    content:"";
    position:absolute;
    vertical-align:top;
    width:100%;
    height:100%;
    z-index: 9999;
    top: 0px;
  }
}

Answer 1

SVG是创建此类形状的最佳方法。

我们可以使用SVG的{{1}}元素来创建此形状，并使用一些纯色，渐变甚至图案填充它。

只有一个属性path用于定义d元素中的形状。该属性本身包含许多短命令和很少的参数，这些命令是这些命令工作所必需的。

以下是必要的代码：

path

以下是上述代码的简要说明：

<path fill-rule="evenodd" fill="#0085ca" d="M0,0 h458 c8,0 8,10 0,10 h-9 c-8,0 -8,10 0,10 h16 .... .... .... c-8,0 -8,10 0,10 h11 h-470 z M412,10 c8,0 8,10 0,10 h-3 c-8,0 -8,-10 0,-10 z M489,0 c8,0 8,10 0,10 h-8 c-8,0 -8,-10 0,-10 z .... .... M461,280 a5 5 0 1 0 0 10 a5 5 0 1 0 0 -10 .... .... M420,470 c8,0 8,10 0,10 h-6 c-8,0 -8,-10 0,-10 z" />命令用于定义起点。通常它出现在开头并指定绘图开始的位置。
M命令用于绘制水平线。
h命令用于绘制曲线。
c命令用于绘制弧。

路径命令有两种变体。大写命令指定绝对坐标，而小写指定相对坐标。

a属性定义哪个点应位于fill-rule内。它有两个可能的值，即path和nonzero。 Here是此属性的详细说明。

输出图片：

工作演示：

evenodd

* {box-sizing: border-box;}
body {
  margin: 0;
}
.banner {
  background: #333 url("http://www.planwallpaper.com/static/images/hd-dark-wallpapers-4.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.banner .shape {
  position: absolute;
  height: 100%;
  width: 49%;
  z-index: 0;
  left: 0;
  top: 0;
}
.caption {
  justify-content: center;
  align-items: center;
  position: relative;
  display: flex;
  height: 100%;
  width: 35%;
  z-index: 1;
}
.caption-holder {
  font-family: Airal, sans-serif;
  line-height: 24px;
  font-size: 16px;
  padding: 10px;
  color: #fff;
}

有用的资源：

如何在图像上方创建特定的图案叠加？

1 个答案: