CSS:条纹背景的实现

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。要想在网页中实现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都需要用图像编辑器来修改它，费时费力。使用css实现条纹背景，减少图片体积，实现优化目的。

线性渐变实现

线性渐变中，如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。

1. 水平条纹背景

 width: 100px;
 height: 100px;
 background:linear-gradient(#ccc 50%,#f0f0f0 50%);
 background-size: 100% 30px;

在上述方法的基础上调整属性值得到其他衍生的条纹背景

2. 垂直条纹背景

 width: 100px;
 height: 100px;
 background:linear-gradient(to right ,#ccc 50%,#f0f0f0 50%);
 background-size: 30px 100%;

3. 斜向条纹背景

 width: 100px;
 height: 100px;
 background:linear-gradient(45deg,
    #ccc 25%,#f0f0f0 0,#f0f0f0 50%,
    #ccc 0,#ccc 75%,#f0f0f0 0);
 background-size:30px 30px;

使用背景图片

width: 100px;
height: 100px;
background-image: url('./background.png');

总结

线性渐变实现条纹背景适用于简单条纹背景，复杂的背景还是需要使用图片实现。