码迷,mamicode.com
首页 > Web开发 > 详细

如何使用HTML和CSS为背景创建Wave图片?

时间:2020-05-10 10:29:28      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:wav   text   round   web前端   nbsp   forest   示例   span   网页   

通过避免使用常规的矩形背景或标题,这种类型的背景可在您的网页上创建唯一性。以下标题设计将显示您的创造力。此设计可以通过两种方式实现:

  • 在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> 

 

如何使用HTML和CSS为背景创建Wave图片?

标签:wav   text   round   web前端   nbsp   forest   示例   span   网页   

原文地址:https://www.cnblogs.com/xiewangfei123/p/12862175.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!