不同顏色，圖像和形狀的背景

Question

我想要這樣的背景。我怎樣才能得到這個純粹的CSS。

...我已經尋找這一點，但我沒有找到任何答案。

我想忽略大背景圖像的用法。

UPDATE

我已經試過這樣的（僅顏色）

background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%) 

但是，我想與顏色添加圖片。

這裏是小提琴，我已經試過Fiddle-Demo

而且它反應靈敏，您可以通過調整窗口檢查有問題。

Answer 1

多個背景圖像：

div { 
 
    height: 200px; 
 
    width: 400px; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
    background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg); 
 
}

<div></div>

或者僞元件：

div { 
 
    height: 200px; 
 
    width: 400px; 
 
    margin: auto; 
 
    border: 1px solid grey; 
 
    background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg); 
 
    background-size: 100%; 
 
    background-position: center right; 
 
    background-repeat: no-repeat; 
 
    position: relative; 
 
} 
 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%); 
 
}

<div></div>