在不断变化的渐变背景之上叠加SVG / PNG文件

时间:2016-06-15 04:08:19

标签: javascript jquery css svg transparent

以下是目前情况的链接:
http://cubicfoundations.com

我想要实现的目标:

http://cubicfoundations.com/SCREENSHOT.png

渐变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;
}

2 个答案:

答案 0 :(得分:0)

你的svg错了:只为白色部分重新制作,没有边距。

然后,您将能够将其放入播放移动渐变的HTML容器中。

答案 1 :(得分:0)

在具有HTML5和IE 10及更高版本的浏览器上,您可以使用Flex容器。 Flex容器是通过将CSS属性应用于HTML元素来创建的,这些元素使它们成为智能&#34;在布局,调整大小和填充其父元素。

这是一个教程:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是一个代码生成器:

http://the-echoplex.net/flexyboxes/