通过避免使用常规的矩形背景或标题，这种类型的背景可在您的网页上创建唯一性。以下标题设计将显示您的创造力。此设计可以通过两种方式实现：
- 在CSS的div元素上使用:: before和:: after选择器。
- 在HTML中使用SVG。
示例：本示例在div元素上使用::beforeand ::after选择器为背景创建波浪图像。
<!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>
之后的问题是，我们必须定义它们在像素中的位置，因此随着屏幕高度的变化，其形状也会发生变化，因此它看起来并不正确。因此，为此，我们在CSS中使用SVG。
示例：此示例使用SVG设计背景的波浪图像。
<!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"> <!-- Creating a SVG image --> <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>
示例：此示例使用SVG设计背景的波浪图像。
<!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>