带有css渐变的对角条纹图案表现得很奇怪

Question

我跟着this question在我网站的某些元素中创建了对角线模式。但是，每个元素的结果都不同。

例如我的按钮按预期工作：

但是，当我尝试将其应用于其他元素时，例如：

线似乎不规律地崩溃，结果不一样。

我的css代码是

background-color: transparent;
background-image: repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.2) 1px, transparent 1px, transparent 3px);

为什么会发生这种情况？非常感谢。

Answer 1

试试这个：

background-image: -webkit-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);

-webkit-background-size: 4px 4px;
   -moz-background-size: 4px 4px;
     -o-background-size: 4px 4px;
        background-size: 4px 4px;

/* Background size must be an even number! */