CSS3 1px对角线梯度 [英] CSS3 1px diagonal lines gradient

问题描述

我想使用CSS3创建对角图案，如下所示：

I want to create a diagonal pattern using CSS3, something like this:

所以1px暗对角线，1px光对角线等...

So 1px dark diagonal line, 1px light diagonal line and so on...

这是我想出来的，我觉得我很近，但是有点不正确：

This is what i came up with, i feel like i'm close but something is defenitely not right:

background-color: #454545;
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 4px);

演示：

http://tinkerbin.com/6mTBtADt

推荐答案

只要使用background-size与您的exisiting代码试着添加这个background-size：8px 8px;

just use background-size with your exisiting code try to add this background-size: 8px 8px;

这篇关于CSS3 1px对角线梯度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！