Question

我有一个网站，我正在尝试使用两个渐变来获得细微细条纹的背景。我使用这个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小提琴，以显示我的结果。

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

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

Answer 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

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

1 个答案: