css - 如何在没有真实 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

您不需要 Canvas 或背景图像。您可以使用 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 语句来减小文件大小，但它们在这里分开以提高可读性。