我想要这样的背景。我怎样才能用纯CSS获得它。
我搜索了这个,但我没有找到任何答案。
我想忽略大背景图像的用法。
更新
我试过这样的(只有颜色)
background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)
但是,我想用彩色添加图像。
这是小提琴,我尝试过Fiddle-Demo
它有响应问题,您可以通过调整窗口来检查。
答案 0 :(得分:5)
多个背景图片:
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>
&#13;
或伪元素:
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%);
}
&#13;
<div></div>
&#13;