css 背景图片和背景色渐变同时存在

css 背景图片和背景色渐变同时存在

1、垂直渐变

效果图：

.wrapper {width:500px;height: 500px;background: url(./imabg.png) no-repeat bottom / contain, linear-gradient(#333 0%, #fff 100%);background-size: 50%;}

2、横向渐变

.wrapper {width:500px;height: 500px;background: url(./imabg.png) no-repeat bottom / 50%, linear-gradient(to right, #02b0b0, #03ceac);}