Html 为页面背景绘制矢量形状_Html_Css_Canvas_Svg_Stylesheet

Html 为页面背景绘制矢量形状

html css canvas svg

Html 为页面背景绘制矢量形状,html,css,canvas,svg,stylesheet,Html,Css,Canvas,Svg,Stylesheet,我需要使用HTML5画布、SVG、CSS等创建多个向量形状我知道我可以通过DIV和Z-index等实现这一点，但我想找到使用矢量图形的解决方案，以便在运行时更新形状、颜色和位置除了制作大量的div和更改其z-index之外，我怎样才能让形状成为所有事物的幕后黑手呢到目前为止，我所看到的最接近svg的方法似乎是使用svg并通过背景图像加载它下面是一个图像，表示我想用CSS做什么：您可以使用绝对定位的框上的边框半径组合（相对于视口或某种包装器元素）来完成此操作。你可以给他们一个低或负的z指

我需要使用HTML5画布、SVG、CSS等创建多个向量形状

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

除了制作大量的div和更改其z-index之外，我怎样才能让形状成为所有事物的幕后黑手呢

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

下面是一个图像，表示我想用CSS做什么：

您可以使用绝对定位的框上的边框半径组合（相对于视口或某种包装器元素）来完成此操作。你可以给他们一个低或负的z指数。透明度可以通过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>


.包装纸{
背景：rgba（162200208,0.2）；
宽度：600px；
保证金：0自动；
位置：相对位置；
高度：400px；/*温度*/
}
.盒子{
背景：rgba（69126138,0.3）；
位置：绝对位置；
z指数：-1；
}
.一{
宽度：80px；
高度：80px；
边界半径：15px；
顶部：30px；
左：30px；
}
.二{
宽度：60px；
高度：60px；
边界半径：10px；
顶部：90px；
左：90px；
}

此链接将帮助您开始在HTML5画布中创建圆角

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

    z-index: 10

添加到该div（确保该数字高于应用于canvas元素的z索引）。避免使用

    z-index: -1

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

有关更多信息，请参见此处：

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

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

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

你有什么问题吗？或者只是请求某人为您编写代码？抱歉，我以问题的形式更新了它。您甚至可以将所有背景相互叠加，并更改它们的不透明度/z-index/visibility/等等，有这么多简单的选项可用，我不明白您为什么拒绝它们。@Trapline我已经阅读了问题，你所说的唯一真正的原因就是“仅仅因为”。我不相信有更好的方法。您是否有证据表明，我们提供的解决方案或您尝试过的解决方案直接导致在适当的时间加载页面时出现问题？@Trapline问题在于您已经得到了对不同方法的充分解释。我可以理解你对知识的追求，但就实现而言，你可能永远不会真正使用更先进的技术。这里的每个人都在提供最简单的显而易见的解决方案，这是有原因的，因为他们都经过了尝试和测试，在大多数情况下，都是标准的。谢谢你，但我要求的解决方案不使用一堆div。那么你打算将CSS样式应用到什么…？我有一个包装div a body etcIf，你不想要div，然后，您可以使用CSS3的多背景图像功能（尽管较旧的浏览器将落后）。我想，你可以把这些背景图片放在身体元素上，尽管我从未尝试过。