如何使用HTML和CSS为背景创建Wave图片？
2021-03-09 21:29
标签：wav text round web前端 nbsp forest 示例 span 网页 通过避免使用常规的矩形背景或标题，这种类型的背景可在您的网页上创建唯一性。以下标题设计将显示您的创造力。此设计可以通过两种方式实现： 示例：本示例在div元素上使用::beforeand ::after选择器为背景创建波浪图像。 之后的问题是，我们必须定义它们在像素中的位置，因此随着屏幕高度的变化，其形状也会发生变化，因此它看起来并不正确。因此，为此，我们在CSS中使用SVG。 示例：此示例使用SVG设计背景的波浪图像。 示例：此示例使用SVG设计背景的波浪图像。 如何使用HTML和CSS为背景创建Wave图片？ 标签：wav text round web前端 nbsp forest 示例 span 网页 原文地址：https://www.cnblogs.com/xiewangfei123/p/12862175.html
DOCTYPE html> html>
head> title> Web前端开发公众号 网站-www.webqdkf.com title>
style> .wave { position: absolute; top: 0px; left: 0px; right: 0px; height: 70px; width: 100%; background: dodgerblue; z-index: -1; } .wave::before { content: ""; display: block; position: absolute; border-radius: 100% 90%; width: 51%; height: 75px; right: 0px; top: 35px; } .wave::after { content: ""; display: block; position: absolute; border-radius: 100% 90%; width: 51%; height: 75px; left: -8px; top: 25px; } style> head>
body style="text-align:center;"> h1 style="color:forestgreen;"> Geeks For Geeks h1>
div class="wave">div> body>
html>
DOCTYPE html> html>
head> title> Web前端开发公众号 网站-www.webqdkf.com title>
style> svg { display: inline-block; position: absolute; top: 0; left: 0; z-index: -1; } .container { display: inline-block; position: absolute; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; top: 0; left: 0; } body { overflow: hidden; } style> head>
body style="text-align:center;"> h1 style="color:lawngreen;"> Geeks For Geeks h1>
div class="container">
svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
path d="M0, 100 C150, 200 350, 0 500, 100 L500, 00 L0, 0 Z" style="stroke:none; fill:dodgerblue;"> path> svg> div> body>
html>
DOCTYPE html> html>
head> title> Web前端开发公众号 网站-www.webqdkf.com title>
style> svg { display: inline-block; position: absolute; top: 0; left: 0; } .container { display: inline-block; position: absolute; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; top: 0; left: 0; } body { overflow: hidden; } style> head>
body style="text-align:center;"> h1 style="color:white;"> Geeks For Geeks h1>
div class="container"> svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" style="z-index: -2;">
path d="M0, 100 C150, 200 350, 0 500, 100 L500, 00 L0, 0 Z" style="stroke: none; fill:rgba(30, 144, 225, 0.5);"> path> svg> div>
div class="container"> svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" style="z-index:-1;">
path d="M0, 80 C300, 0 400, 300 500, 50 L500, 00 L0, 0 Z" style="stroke: none; fill:rgba(153, 50, 204, 0.5);"> path> svg> div>
div class="container"> svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" style="z-index:-3;">
path d="M0, 100 C150, 300 350, 0 500, 100 L500, 00 L0, 0 Z" style="stroke: none; fill:rgba(220, 20, 60, 0.5);"> path> svg> div> body>
html>
上一篇：用Node.js做项目的坑
下一篇：HTML5与类有关的扩充