不同颜色，图像和形状的背景

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>