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

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

问题描述

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

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

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;
}

<div></div>

这篇关于背景图像重复图案在图案尺寸较小时会出现副作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！