有没有办法对颜色和 SVG 进行分层以制作背景

【问题标题】：Is there a way to layer colors and SVG to make a background有没有办法对颜色和 SVG 进行分层以制作背景
【发布时间】：2021-01-01 19:32:00
【问题描述】：

是否可以有背景颜色，然后在其前面有一个 SVG 文件，然后在其前面有另一个不透明的图层？我试图为网站的背景做一个很酷的效果。提前致谢！

【问题讨论】：

有可能，但请阅读stackoverflow.com/help/how-to-ask

标签： css background background-image background-color

【解决方案1】：

您可以为此使用z-index。这应该可行，一个活生生的例子是https://codepen.io/tixpro/pen/VwadJxo

<body class='main'>
  Hello
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Yin_yang.svg" />
  <div class='overlay'></div>
</body>

<style>
  body{
   background-color:#424242;
   background-size: 'cover'
}
 
/*overlay styling, source: https://www.w3schools.com/howto/howto_css_overlay.asp */
.overlay{
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(4,0,0,0.5); /* Black background with opacity */
  z-index: 2;
}
</style>

【讨论】：