背景图像重复图案在图案尺寸较小时会出现副作用 [英] 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;
}

<div></div>

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