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

Posted 2023-03-05

【中文标题】如何为背景图像添加背景颜色？ [复制]

【英文标题】：How to add background color for background image? [duplicate]

【发布时间】：2019-02-28 15:00:29

【问题描述】：

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

【问题讨论】：

如果您是来寻求帮助的，请让其他人尽可能轻松地帮助您。关注我们的guidelines，记住我们的社区是由志愿者促成的。

您好，欢迎来到堆栈溢出。请花点时间阅读***.com/help/how-to-ask，如果您不提供任何代码，我们无法为您提供帮助，请您输入您的代码

您能在此处添加您的代码吗？否则是不可能找到问题的。您需要通过编辑问题来添加片段。

【参考方案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");

我建议您在下次询问 *** 之前先在 Google 上搜索您的问题！

希望这会有所帮助。