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

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

沃梦达教程前端问题

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

<div></div>

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

沃梦达教程

本文标题为：背景图像重复图案在图案尺寸较小时会出现副作用

上一篇：如何为HTML电子邮件设置低不透明度背景图像

下一篇：如何使Ionic 4ion-ol达到相同的高度？