CSS 条纹在 Chrome 中无法正确显示答案

【问题标题】：CSS Stripes Not Displaying Correctly in ChromeCSS 条纹在 Chrome 中无法正确显示
【发布时间】：2015-10-31 14:12:15
【问题描述】：

我有一个网站，我试图在其中使用两个渐变来获得微妙的细条纹背景。我使用这个 CSS 实现了这一点：

 background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        #101010 4px,
        #737373 4px 
       ),
        repeating-radial-gradient(
        #616161,
        #222222 
        );

在 Firefox 中，条纹看起来很棒，但是当我将它放到 Chrome 中时，它看起来很糟糕。

如果您在 Chrome 中打开此链接，您应该能够明白我的意思。

JS Fiddle - Not appearing correctly in Chrome

我尝试在网上找到解决方案，最接近的是这篇文章：

css striped bg oddities in Chrome

我将上述帖子中的代码应用到我的 CSS 中，并添加了径向渐变。这是我的 JS Fiddle 来展示我的结果。

JS Fiddle - Strange Checkerboard

当我应用它时，正如您将看到或已经看到的那样，我得到一个奇怪的棋盘格图案。如何在顶部获得有角度的线性渐变，在底部获得径向渐变并让它们在所有浏览器中正确显示？

我什至尝试将我盯着的 CSS 与“webkit”块结合起来，但这根本不起作用：

    html {
background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, repeating-radial-gradient(#616161, #222222);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%), repeating-radial-gradient(#616161, #222222);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, repeating-radial-gradient(#616161, #222222);

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

任何帮助将不胜感激！！我已经搜索了几个小时，尝试了很多东西......但无法完成这项工作！

【问题讨论】：

那么，除了 Chrome 之外，你需要的和我在其他浏览器中看到的一样，就像第一个 variant?
我在 Firefox 中看到复选框撕裂，但在 Chrome 中看起来没问题。
作为对提出解决方案的人的说明，我打开了小提琴链接，它在 chrome 中看起来很棒，但在 Firefox 中更糟糕，与 OP 所描述的完全相反，我期待这里的答案。
AleshaOleg - 我正在寻找可调整大小的细条纹图案，具有径向渐变效果。我试图让它在所有浏览器中看起来都很干净。在我的计算机上，它在 Chrome 中看起来并不干净。

标签： html css linear-gradients radial-gradients

【解决方案1】：

   background: -webkit-repeating-linear-gradient(
   45deg, transparent, transparent 2px, #101010 4px, #737373 4px
   ),
   -webkit-repeating-radial-gradient(#616161, #222222); background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    #101010 4px,
    #737373 4px 
   ),
    repeating-radial-gradient(
    #616161,
    #222222 
    );

试试这个。

并推荐一个非常有用的网站prefix your css

还有the compatibility of browsers

【讨论】：

不幸的是，这不起作用，但这些链接似乎会非常有帮助/有用。谢谢！