如何为背景图像添加背景颜色？ [重复]

This question already has an answer here:

I'm having a problem. I want my result is image 1 with original image is image 2 use CSS or Bootstrap Thanks all! Image result here

image original

</div>

Take a look at this fiddle: https://jsfiddle.net/u85eorcm/

body {
  background:linear-gradient(90deg, rgba(17,50,80,0.5) 100%, rgba(60,72,116,0.5) 50%), 
    url("https://i.stack.imgur.com/xsQv6.png");
}

I'd recommend googling your questions firstly before asking StackOverflow next time!

Hope this helps.

Try this. Adjust the colors as you want.

HTML

<div class="box">
  <img src="https://i.stack.imgur.com/0nziL.png">
</div>

CSS

img {
  width: 100%;
  display: block;
}

.box {
  position: relative;
}

.box::after {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, 
    rgba(56, 103, 214,0.4) 0%, 
    rgba(19, 15, 64,0.7) 50%);
}

Demo https://jsbin.com/fetoyubapo/edit?html,css,output