CSS条纹在Chrome中不能正确显示

我有一个网站，我在其中尝试使用两个渐变获得细微的细条纹背景。我实现了使用这个CSS：CSS条纹在Chrome中不能正确显示

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

当我应用它，因为你会看到，或者看到了，我收到一条奇怪的棋盘图案。我怎样才能得到一个角度，线性渐变顶部，在底部的径向渐变，并让他们在所有浏览器中正确显示？

我甚至尝试结合我瞪着眼，用“WebKit的”块中的CSS并没有在所有的工作：

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

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

来源

2015-08-08 Brenda813

所以，你需要同样的东西，我可以在不同的Chrome浏览器在第一次[变种]看到像（http://jsfiddle.net/ bnies813/smt3uuv8）？ – AleshaOleg

我看到Firefox中的检查框撕裂，但它在Chrome中看起来没问题。 –

作为提出解决方案的人的一个提示，我打开了小提琴链接，它在Chrome浏览器中看起来不错，但在Firefox中更糟，与OP完全相反，我期待这里的答案。。 – gwar9

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

来源

2015-08-08 04:12:56

不幸的是，这并没有奏效，但这些链接看起来像是非常有用/有用。谢谢！ – Brenda813

CSS条纹在Chrome中不能正确显示

回答

相关问题