如何在没有真实 BG 图像的情况下绘制这个背景（使用 canvas/css3？）

Question

我使用 Ionic2 构建一个应用程序，我需要将此背景（带线条的浅蓝色）添加到我的应用程序背景中： 我不想为此导入图像（使用 html5 canvas 和/或 CSS3）。

任何人都可以帮助我吗？

这是我的CSS：

{
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #01c4cd;
}

谢谢你！

Answer 1

您不需要画布或背景图像。您可以使用 css 渐变来实现此目的：

#background { 
  width: 300px;
  height: 400px;
  
  background-image:
        
    /* Line 1 */
    linear-gradient(45deg, rgba(255,255,255,0) 63%,rgba(255,255,255,0.1) 64%,rgba(255,255,255,0) 65%),
      
    /* Line 2 */
    linear-gradient(45deg, rgba(255,255,255,0) 78%,rgba(255,255,255,0.1) 79%,rgba(255,255,255,0) 80%),
    
    /* Blue background gradient */
    linear-gradient(45deg, #1f579b 0%,#7bdce5 100%);   
}

<div id="background"></div>

有几种不同的方法可以实现这一目标，但在本示例中，有一个 div 在背景中带有全尺寸蓝色渐变，以及两个重叠的较小白色渐变来创建线条。您可以添加更多线条、更改其颜色等以获得您想要的效果。

您可以组合这些linear-gradient语句来减小文件大小，但它们单独放置在此处是为了提高可读性。