Question

我正在尝试用背景图像制作一个倾斜的div。 HERE是我想要实现的截图。

我总是使用css三角形制作我的倾斜div。然而，我发现这种技术在这种情况下很麻烦，因为它是两个独立的部分，图片不会连接。

到目前为止，在我的代码中，我有一个div，背景图像应用了一个看起来像这样的before元素：

#booking-form:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -320px;
    border-top: 726px solid transparent;
    border-right: 320px solid $secondary;
}

这使我想要的三角形，但是如果我在三角形中添加一个图像，它会在css之前填充整个图像，看起来像this：

但我需要它看起来像original。

有什么建议吗？谢谢！

Answer 1

只需使用带有适当角度渐变背景的全宽div。

没有变形，没有边界。

body {
  text-align: center;
}
.content {
  height: 150px;
  padding: 20px 0;
  background: linear-gradient(-65deg, rgba(0, 0, 255, 0.5) 65%, transparent 65%);
  display: flex;
}
div {
  background-image: url(http://www.fillmurray.com/460/300);
}
form {
  width: 50%;
  background: rgba(255, 255, 255, 0.85);
  margin-left: auto;
  margin-right: 1em;
}

<div>
  <div class="content">
    <form action=""></form>
  </div>
</div>

Answer 2

遗憾的是，无处不在，mix-blend-mode可能是一个提示，使用渐变来选择要混合的部分

＆＃13;

body {
  height: 100%;
  background: linear-gradient(110deg, white 45%, transparent 45%), url(http://lorempixel.com/800/600/city/3) right no-repeat;
  background-size: 100% 100%, 75% auto ;
  margin: 0;
}

html {
  height: 100%;
  min-width:800px;
  margin: 0;
  background: linear-gradient(110deg, transparent 45%, darkcyan 45%), url(http://lorempixel.com/800/600/city/2)top left no-repeat;
  background-size: 100% 100%, 75% auto;
}

body {
  mix-blend-mode: overlay;
}
/* demo purpose */
body>div {
  padding:1px;
  padding-left: 55%;
  color: black;
}
body>p {
  margin:0;
  }
/* small snippet view purpose */
html, body {
background-attachment:fixed;
}

＆＃13;

<p> nop, mix-blend-mode is not avalaible here :( </p>
<div>
  <h2 name="Summary" id="Summary">Summary<a class="button section-edit only-icon" href="/en-US/docs/Web/CSS/mix-blend-mode$edit#Summary"><i aria-hidden="true" class="icon-pencil"></i><span>Edit</span></a></h2>

  <p>The <strong><code>mix-blend-mode</code></strong> CSS property describes how an element's content should blend with the content of the element that is below it and the element's background.</p>

  <p></p>
  <table class="properties">
    <tbody>
      <tr>
        <th scope="row"><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></th>
        <td><code>normal</code></td>
      </tr>
      <tr>
        <th scope="row">Applies to</th>
        <td>all HTML elements</td>
      </tr>
      <tr>
        <th scope="row"><a href="/en-US/docs/Web/CSS/inheritance">Inherited</a></th>
        <td>no</td>
      </tr>
      <tr>
        <th scope="row">Media</th>
        <td>visual</td>
      </tr>
      <tr>
        <th scope="row"><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></th>
        <td>as specified</td>
      </tr>
      <tr>
        <th scope="row">Animation type</th>
        <td>discrete</td>
      </tr>
      <tr>
        <th scope="row">Canonical order</th>
        <td>the unique non-ambiguous order defined by the formal grammar</td>
      </tr>
      <tr>
        <th scope="row">Creates <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a></th>
        <td>yes</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

如何创建一个应用了背景图像的倾斜div？

2 个答案: