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

Question

我使用Ionic2构建应用程序，我需要将此背景（浅蓝色线条）添加到我的应用程序背景： 并且我不想为此导入图像（使用html5 canvas＆amp; /或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语句以保持较小的文件大小，但为了提高可读性，它们在此处分开。