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



是否可以有一个背景色,然后在其前面有一个SVG文件,然后在它前面有另一个不透明度的层?我想为一个网站的背景做一个很酷的效果。提前感谢!

您可以为此使用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>

最新更新