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

Question

我想要這樣的背景。 我怎樣才能用純CSS做到這一點。

我已經搜索過了，但是沒有找到任何答案。

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

UPDATE

我已經嘗試過這種方式（僅適用於顏色）

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

但是，我想添加彩色圖像。

這是我嘗試過的小提琴琴

並且它有響應問題，您可以通過調整窗口大小來檢查。

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