在不断变化的渐变背景之上叠加SVG/PNG文件
MJC*_*MJC 5 javascript css jquery svg transparent
以下是目前看起来的链接:http:
//cubicfoundations.com
我想要实现的目标:
渐变div充当背景.SVG图像(徽标div)使用全宽和高度白色背景覆盖渐变div,通过徽标的透明部分显示渐变颜色.
我该如何实现这一目标？
我也无法为渐变div指定100%的高度 - 它似乎只能在固定的px基础上工作？
任何修复/想法非常感谢!
HTML是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cubic Foundations</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="gradient" />
<div id="logo" />
</body>
</html>
CSS的路径是css/style.css
body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}
#gradient {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
position: absolute;
z-index: -99999;
}
#logo {
width: 100%;
height: 100%;
background: url(../cubic-logo-ws.svg) center center no-repeat;
}