Css 有没有一种方法可以将颜色和SVG分层以制作背景_Css_Background_Background Image_Background Color

Css 有没有一种方法可以将颜色和SVG分层以制作背景

css

Css 有没有一种方法可以将颜色和SVG分层以制作背景,css,background,background-image,background-color,Css,Background,Background Image,Background Color,有没有可能有一个背景色，然后在它前面有一个SVG文件，然后在它前面有另一个不透明度的图层？我试图做一个网站的背景酷的效果。提前谢谢为此，您可以使用z-index。这应该行得通，一个活生生的例子是你好身体{ 背景色：#4242；背景尺寸：“封面” } /*覆盖样式，来源：https://www.w3schools.com/howto/howto_css_overlay.asp */ .覆盖{ 位置：固定；/*位于页面内容顶部*/ 宽度：100%；/*全宽（覆盖整页）*/ 高度：100%

有没有可能有一个背景色，然后在它前面有一个SVG文件，然后在它前面有另一个不透明度的图层？我试图做一个网站的背景酷的效果。提前谢谢

为此，您可以使用

z-index

。这应该行得通，一个活生生的例子是


你好
身体{
背景色：#4242；
背景尺寸：“封面”
}
/*覆盖样式，来源：https://www.w3schools.com/howto/howto_css_overlay.asp */
.覆盖{
位置：固定；/*位于页面内容顶部*/
宽度：100%；/*全宽（覆盖整页）*/
高度：100%；/*全高（覆盖整页）*/
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（4,0,0,0.5）；/*黑色背景，不透明度*/
z指数：2；
}

这是可能的，但请阅读

<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>