沃梦达 / 编程问答 / 前端问题 / 正文

背景图像重复图案在图案尺寸较小时会出现副作用

沃梦达教程前端问题

2022-01-01

background-image repeat pattern is showing side effects when pattern size is small(背景图像重复图案在图案尺寸较小时会出现副作用)

本文介绍了背景图像重复图案在图案尺寸较小时会出现副作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用背景图像创建表格图案，当单元格大小为50px*50px时效果很好，但当我低于25px*25px时，有几行开始消失或晕倒。

此&；背后的原因是什么？如何修复？

At 25px * 25px

At 50px * 50px

div {
  background: pink;
  height: 713px;
  width: 400px;
  background-size: 25px 25px;
  /*background-size: 50px 50px;*/
  background-image: url("https://svgshare.com/i/_GG.svg");
}

<div></div>

代码：https://codepen.io/arnavsingh/pen/bGWPqXP

注意：使用浏览器设置放大时会修复此问题

推荐答案

此类任务现在很琐碎，只有一个渐变：

div {
  background: pink;
  height: 713px;
  width: 400px;
  --b:1px; /* adjust this */
  background:
    conic-gradient(at bottom var(--b) right var(--b),#000 75%,#0000 0) 
    0 0/25px 25px /* and this */
    pink;
}