-5

我需要使用 HTML5-Canvas、SVG、CSS 等创建多个矢量形状

我知道我可以通过 DIV 和 Z-index 等来实现这一点，但我想使用矢量图形找到解决方案，以便我可以在运行时更新形状、颜色、位置。

除了制作大量的 DIV 和更改它们的 z-index 之外，我怎样才能让形状成为所有事物的背后？

到目前为止，我看到的最接近的似乎是使用 svg 并通过背景图像加载它。

这是一张代表我想用 CSS 做什么的图像： 在此处输入图像描述

4

2 回答 2

3

您可以通过在绝对定位的框上结合边界半径来做到这一点（相对于视口或相对于某种包装元素）。你可以给他们一个低或负的 z-index。透明度可以用 rgba 颜色完成。例如

background: rgba(69,126,138,0.3);
border-radius: 15px;

这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.wrapper {
    background: rgba(162,200,208,0.2);
    width: 600px; 
    margin: 0 auto;
    position: relative;
    height: 400px; /* temp */
}

.box {
    background: rgba(69,126,138,0.3);
    position: absolute;
    z-index: -1;
}

.one {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    top: 30px;
    left: 30px;
}

.two {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    top: 90px;
    left: 90px;
}

</style>

</head>
<body>
    <div class="wrapper">
        <div class="box one"></div>
        <div class="box two"></div>
    </div>
</body>
</html>
于 2013-05-07T15:08:52.620 回答
0

这个链接应该让您开始在 HTML 5 画布中创建圆角。

http://www.html5canvastutorials.com/tutorials/html5-canvas-rounded-corners/

它还可以让您四处玩耍并想出一个看起来像您的图像的解决方案。关于然后将其放在其他元素后面，将其余元素包装在 div 中并应用

    z-index: 10

到这个 div （确保这是一个比应用于 canvas 元素的 z-index 更高的数字）。避免使用

    z-index: -1

因为这可能会在某些浏览器中造成严重破坏。

请参阅此处了解更多信息：

我页面背景中的 html5 画布元素？

显然，使用 HTML5 画布意味着您的网站不会完全向后兼容。

有关兼容性的信息，请参见此处：

http://caniuse.com/#feat=canvas

请注意，由于我从未使用过 HTML 5 画布，因此我真的无法为您提供更多帮助。我个人认为这是呈现图像的一种过于复杂的方式，但我想其他人对它有更实际的用途。

于 2013-05-07T15:50:57.210 回答