如何为背景图像添加背景颜色？ [复制]答案

【问题标题】：How to add background color for background image? [duplicate]如何为背景图像添加背景颜色？ [复制]
【发布时间】：2019-02-28 15:00:29
【问题描述】：

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

【问题讨论】：

如果您是来寻求帮助的，请让其他人尽可能轻松地帮助您。关注我们的guidelines，记住我们的社区是由志愿者促成的。
您好，欢迎来到堆栈溢出。请花点时间阅读stackoverflow.com/help/how-to-ask，如果您不提供任何代码，我们无法为您提供帮助，请您输入您的代码
您能在此处添加您的代码吗？否则是不可能找到问题的。您需要通过编辑问题来添加片段。

标签： php html css bootstrap-4

【解决方案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

【讨论】：

【解决方案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 之前先在 Google 上搜索您的问题！

希望这会有所帮助。

【讨论】：