Technicalarticles

如何使用HTML和CSS为背景创建Wave图片？
作者：赵刘伟 时间：2020-05-14 浏览量：
通过避免使用常规的矩形背景或标题，这种类型的背景可在您的网页上创建唯一性。以下标题设计将显示您的创造力。此设计可以通过两种方式实现：
  • 在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;             background-color: white;             right: 0px;             top: 35px;         }         .wave::after {             content: "";             display: block;             position: absolute;             border-radius: 100% 90%;             width: 51%;             height: 75px;             background-color: dodgerblue;             left: -8px;             top: 25px;         } </style> </head>
<body style="text-align:center;">     <h1 style="color:forestgreen;">         Geeks For Geeks     </h1>
    <div></div> </body>
</html>
输出：未使用之前

640.png

使用之前和之后的问题是，我们必须定义它们在像素中的位置，因此随着屏幕高度的变化，其形状也会发生变化，因此它看起来并不正确。因此，为此，我们在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>
        <!-- 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后

640 (1).png

示例：此示例使用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>         <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>         <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>         <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>
输出：

640 (2).png

返回列表

想和你做个朋友

DO U LIKE?