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

Question

我想使一个倾斜的div与背景图像。 HERE是我试图实现的屏幕截图。

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

截至目前在我的代码我有一个元素之前有应用背景图像，看起来像这样一个div：

#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

遗憾的是没有avalaible无处不在，mix-blend-mode可能是一个暗示使用梯度选择至极部分融为一体

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

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