为页面背景绘制矢量形状答案

【问题标题】：Draw vector shapes for background of page为页面背景绘制矢量形状
【发布时间】：2013-05-07 14:58:05
【问题描述】：

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

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

除了制作大量的 DIV 并更改它们的 z-index 之外，我怎样才能让形状出现在所有事物的后面？

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

这是一张代表我想用 CSS 做什么的图片：

【问题讨论】：

您有问题吗？或者只是请求某人为您编写代码？
对不起我以问题的形式更新了。
您甚至可以将所有背景叠加在一起并更改它们的不透明度/z-index/visibility/等，有很多简单的选项可用，我不明白你为什么重新拒绝他们。
@Trapline 我已经阅读了这个问题，而你真正陈述的唯一原因是“只是因为”。我不相信有更好的方法来做到这一点。您是否有证据表明我们提供的解决方案或您尝试过的解决方案直接导致无法及时加载页面？
@Trapline 问题是你已经得到了不同方法的充分解释。我可以理解您对知识的追求，但在实施方面，您可能永远不会真正使用更先进的技术。这里的每个人都提供最简单明显的解决方案是有原因的，这是因为它们经过了尝试和测试，并且在大多数情况下都是标准。

标签： html css canvas svg stylesheet

【解决方案1】：

您可以在绝对定位的盒子上结合使用边框半径（相对于视口或相对于某种包装元素）。你可以给他们一个低或负的 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>

【讨论】：

谢谢，但我请求了一个不使用一堆 div 的解决方案
那么您打算将 CSS 样式应用于...？
我有一个包装 div 一个 body 等
如果你不想要 div，那么你可以使用 CSS3 的多背景图片功能（虽然旧的浏览器会被抛在后面）。我想你可以把这些背景图片撒在身体元素上，虽然我从来没有尝试过。

【解决方案2】：

此链接应该可以帮助您开始在 HTML 5 画布中创建圆角。

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

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

    z-index: 10

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

    z-index: -1

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

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

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

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

注意因为我从来没有使用过 HTML 5 画布，所以我真的帮不了你了。我个人认为这是一种过于复杂的图像呈现方式，但我想其他人对此有更实际的用途。

【讨论】：