如何为背景图片添加背景颜色？

Question

我有问题。 我希望我的结果是图像1与原始图像是图像2使用CSS或Bootstrap 谢谢大家！

Answer 1

尝试一下。 随意调整颜色。

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%);
}

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

Answer 2

看看这个小提琴：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");
}

我建议先搜索您的问题，然后再次询问StackOverflow！

希望这会有所帮助。