Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

复杂的背景图案实践中的疑问 #83

Open
Southhill opened this issue Oct 1, 2017 · 5 comments
Open

复杂的背景图案实践中的疑问 #83

Southhill opened this issue Oct 1, 2017 · 5 comments
Labels

Comments

@Southhill
Copy link

Southhill commented Oct 1, 2017

你好,我在实践复杂的背景图案时出现一个疑问:
按作者的案例代码写棋盘背景,小方格不能均分容器宽高。代码如下:

width: 300px;
 height: 300px;
background: #58a;
 background-image: linear-gradient(90deg, white 1px, transparent 0),
                              linear-gradient(white 1px, transparent 0);
background-size: 30px;

显示效果:
异常的显示
如果我把background-size,width,height的值调整为40px,400px,则不会有显示异常。
显示效果:
snipaste_2017-10-01_13-19-36

我不清楚我的代码哪里出问题了,恳请解答一下。

@cssmagic
Copy link
Owner

cssmagic commented Oct 8, 2017

抱歉,无法重现。你能提供在线 demo 吗?

另外建议你检查一下,你的浏览器是不是处于缩放模式?

@cssmagic cssmagic added the 问题 label Oct 8, 2017
@Southhill
Copy link
Author

浏览器缩放应该是正常的,问题出现在chrom浏览器中,火狐开发版浏览器无问题。

@cssmagic
Copy link
Owner

cssmagic commented Oct 9, 2017

我无法重现。你看一下这里是否正常:
https://codepen.io/cssmagic/pen/oGqGeR

@Southhill
Copy link
Author

Southhill commented Oct 9, 2017

codepen.io上的demo在我的电脑上(Windows系统,10.0.15063 版本 15063
)火狐开发版浏览器无问题。chrom浏览器还是同样的问题。但我之前在mac系统下用chrom浏览器测试显示是正常的。
也许会是系统的影响。
这是相关图片:
snipaste_2017-10-09_20-40-58

不管怎么说,还是很感谢您的解答。

@cssmagic
Copy link
Owner

cssmagic commented Oct 10, 2017

抱歉,我不方便在 Windows 上测试。你可以找别人的 Windows 系统测试一下,看看是不是有同样的问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants