逻辑(css)-背景网格制作(linear-gradient)

linear-gradient

语法：linear-gradient([direction], color-stop1, color-stop2, ...)
第一个参数为(可选)方向参数，可以是度数也可以是方位名词,方向与读书的关系如下：

角度	方位	文字说明	示例
0deg	to top	从下往上渲染
90deg	to right	从左往右渲染
180deg	to bottom	从上往下渲染
270deg	to left	从右往左渲染
第二个参数为颜色+开始位置

• [1]

   linear-gradient(0deg, #000, transparent 1px)
  

  从下往上开始渲染；
  最初渲染颜色为黑色
  在1px位置开始渲染为透明色至最终位置
• [2]

  linear-gradient(0deg, #000, transparent 40%, red)
  

  从下往上开始渲染；
  最初渲染颜色为黑色；
  在40%位置渲染为透明色；
  最终渲染的颜色为红色；

需求

如上图所示，希望文本能够以网格为背景进行展示，本来是想用UI切的图片设置背景图，但是由于文字数量不固定，图片会有缩放情况造成渲染效果与预期不符，于是使用css的background-image: linear-gradient来设置网格背景图。

实现

<div class="contain"></div>

.contain{
    
    
  position: relative;
  /* 宽度默认手机屏幕宽度，高度由内容撑开 */
  &::after{
    
    
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      0deg,
      #000,
      transparent 1px), // 上下 0-1px为黑色，1px至末尾为透明色 这样可以画出一个1px的黑线
      linear-gradient(
        90deg,
        #000,
        transparent 1px
      ); // 左右 同上下相同
    background-size: 12px 12px; // 12px一个画布(1个正方形)
    // 相当于图片长和宽都是12px，然后repeat填充整个元素
    opacity: 0.1; // 方格作为背景太明显了，因此加一个透明度(加在伪元素上不影响其他元素)
  }
  font-size: 13px;
}
</style>