{"json_modified": "2016-06-29T05:10:04.367619", "uuid": "4e808ea5-c146-49c4-8084-8a47171df58e", "title": "repeating-linear-gradient", "url": "/zh-CN/docs/Web/CSS/repeating-linear-gradient", "tags": [], "translations": [{"uuid": "87a5bfb2-9167-4561-91ad-acee7d0515d8", "title": "repeating-linear-gradient()", "url": "/en-US/docs/Web/CSS/repeating-linear-gradient", "tags": ["CSS Image", "CSS", "Reference", "Graphics", "Web", "CSS Function", "css3-images", "Layout"], "summary": "The CSS <code>repeating-linear-gradient</code> function creates an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree.\"><code>&lt;image&gt;</code></a> consisting of repeating gradients. It works similarly to the basic linear gradients as described by <a href=\"/en-US/docs/Web/CSS/linear-gradient\" title=\"The CSS linear-gradient() function creates an &lt;image&gt; which represents a linear gradient of colors. The result of this function is an object of the CSS &lt;gradient&gt; data type. Like any other gradient, a CSS linear gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size&#xA0;of the element it applies to.\"><code>linear-gradient()</code></a>, and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops'\u00a0positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first).", "localization_tags": [], "locale": "en-US", "last_edit": "2016-06-28T07:20:43", "review_tags": []}, {"uuid": "0859deb5-0d75-4c39-8d2c-2e9335ea442f", "title": "repeating-linear-gradient", "url": "/pt-BR/docs/Web/CSS/repeating-linear-gradient", "tags": [], "summary": "A fun\u00e7\u00e3o CSS <code>repeating-linear-gradient</code> cria uma <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"/pt-BR/docs/Web/CSS/image\"><code>&lt;image&gt;</code></a> de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares b\u00e1sicos, como descrito em <a title=\"The documentation about this has not yet been written; please consider contributing!\" href=\"/pt-BR/docs/Web/CSS/linear-gradient\"><code>linear-gradient</code></a>, mas ele automaticamente repete as paradas das cores infinitamente em ambas as dire\u00e7\u00f5es, com suas posi\u00e7\u00f5es trocadas por m\u00faltiplos da diferen\u00e7a entre a posi\u00e7\u00e3o da \u00faltima parada de cor e a posi\u00e7\u00e3o da primeira.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2016-06-29T04:48:24", "review_tags": []}, {"uuid": "fc6e22bb-690e-43db-9497-bc2f66660cc4", "title": "repeating-linear-gradient", "url": "/fr/docs/Web/CSS/repeating-linear-gradient", "tags": ["CSS", "R\u00e9f\u00e9rence CSS"], "summary": "La fonction <a href=\"/fr/docs/CSS\" title=\"/fr/docs/CSS\">CSS</a> <code>repeating-linear-gradient</code> cr\u00e9\u00e9 une <a href=\"/fr/docs/Web/CSS/image\" title=\"Le type de donn&#xE9;e CSS &lt;image&gt; repr&#xE9;sente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilis&#xE9;es via une URL), et les images g&#xE9;n&#xE9;r&#xE9;es dynamiquement comme les d&#xE9;grad&#xE9;s ou les images construites &#xE0; partir de fragments de l'arbre du DOM.\"><code>&lt;image&gt;</code></a> de d\u00e9grad\u00e9s qui se r\u00e9p\u00e8tent. Cela fonctionne de mani\u00e8re similaire, et acc\u00e8pte les m\u00eames arguments que les d\u00e9grad\u00e9s lin\u00e9aires basiques, comme d\u00e9cris dans <a href=\"/fr/docs/Web/CSS/linear-gradient\" title=\"Les d&#xE9;grad&#xE9;s lin&#xE9;aires sont d&#xE9;finis par un axe :&#xA0;la ligne du d&#xE9;grad&#xE9;. Chaque point de cette ligne aura une couleur diff&#xE9;rente. Les lignes perpendiculaires &#xE0; la ligne du d&#xE9;grad&#xE9; ont chacune une couleur qui est celle du point se situant sur la ligne du d&#xE9;grad&#xE9; &#xE0; ce niveau.\"><code>linear-gradient</code></a>, mais les points d'arr\u00eat des couleurs sont automatiquement r\u00e9p\u00e9t\u00e9s ind\u00e9finiment dans les deux directions, en voyant leurs positions d\u00e9plac\u00e9es d'une multiples de la distance entre la position du dernier des points d'arr\u00eat et du premier point d'arr\u00eat.", "localization_tags": [], "locale": "fr", "last_edit": "2016-06-28T06:42:50", "review_tags": []}, {"uuid": "4628deac-2cf0-442e-aa82-0d26cd1c1eb3", "title": "repeating-linear-gradient", "url": "/ja/docs/Web/CSS/repeating-linear-gradient", "tags": ["NeedsNewMobileCompat", "CSS", "css3-images", "CSS Reference"], "summary": "CSS \u306e <code>repeating-linear-gradient</code> \u95a2\u6570\u306f\u3001\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u7e70\u308a\u8fd4\u3057\u306b\u3088\u308b <a title=\"CSS &#x306E; &lt;image&gt; &#x30C7;&#x30FC;&#x30BF;&#x578B;&#x306F;&#x3001;2 &#x6B21;&#x5143;&#x306E;&#x753B;&#x50CF;&#x3092;&#x8868;&#x73FE;&#x3057;&#x307E;&#x3059;&#x3002;CSS &#x3067;&#x306F;&#x753B;&#x50CF;&#x306F; 2 &#x7A2E;&#x985E;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;URL &#x3092;&#x4F7F;&#x3063;&#x3066;&#x53C2;&#x7167;&#x3055;&#x308C;&#x308B;&#x3053;&#x3068;&#x306E;&#x591A;&#x3044;&#x3054;&#x304F;&#x666E;&#x901A;&#x306E;&#x9759;&#x7684;&#x306A;&#x753B;&#x50CF;&#x3068;&#x3001;&#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x6728;&#x69CB;&#x9020;&#x306E;&#x4E00;&#x90E8;&#x5206;&#x3092;&#x8868;&#x73FE;&#x3059;&#x308B;&#x3088;&#x3046;&#x306A;&#x52D5;&#x7684;&#x306B;&#x751F;&#x6210;&#x3055;&#x308C;&#x305F;&#x753B;&#x50CF;&#x3067;&#x3059;&#x3002;\" href=\"/ja/docs/Web/CSS/image\"><code>&lt;image&gt;</code></a> \u3092\u4f5c\u308a\u307e\u3059\u3002<a title=\"CSS &#x306E; linear-gradient() &#x95A2;&#x6570;&#x306F;&#x3001;&#x8272;&#x306E;&#x7DDA;&#x5F62;&#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x8868;&#x3059; &lt;image&gt; &#x3092;&#x4F5C;&#x308A;&#x307E;&#x3059;&#x3002;&#x3053;&#x306E;&#x95A2;&#x6570;&#x306E;&#x7D50;&#x679C;&#x306F; CSS &#x306E; &lt;gradient&gt; &#x30C7;&#x30FC;&#x30BF;&#x578B;&#x306E;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;\" href=\"/ja/docs/Web/CSS/linear-gradient\"><code>linear-gradient</code></a> \u306b\u66f8\u304b\u308c\u3066\u3044\u308b\u3088\u3046\u306a\u57fa\u672c\u7684\u306a\u7dda\u5f62\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3068\u4f3c\u305f\u52d5\u4f5c\u3092\u3057\u3001\u540c\u3058\u5f15\u6570\u3092\u3068\u308a\u307e\u3059\u304c\u3001\u6700\u521d\u3068\u6700\u5f8c\u306e\u30ab\u30e9\u30fc\u30b9\u30c8\u30c3\u30d7\u9593\u306e\u8ddd\u96e2\u306e\u500d\u6570\u5206\u3060\u3051\u30ab\u30e9\u30fc\u30b9\u30c8\u30c3\u30d7\u3092\u79fb\u52d5\u3055\u305b\u306a\u304c\u3089\u3001\u81ea\u52d5\u7684\u306b\u30ab\u30e9\u30fc\u30b9\u30c8\u30c3\u30d7\u3092\u4e21\u65b9\u5411\u306b\u7121\u9650\u306b\u7e70\u308a\u8fd4\u3057\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-06-28T07:12:59", "review_tags": []}], "modified": "2016-06-29T05:10:04", "label": "repeating-linear-gradient", "localization_tags": ["inprogress"], "locale": "zh-CN", "id": 130483, "last_edit": "2016-06-29T05:09:54", "summary": "CSS <code>repeating-linear-gradient</code> \u65b9\u6cd5 \u521b\u9020\u4e00\u4e2a\u53ef\u91cd\u590d\u7684\u6e10\u53d8\uff08\u6216\u8005<a href=\"/zh-CN/docs/Web/CSS/image\" title=\"CSS&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x63CF;&#x8FF0;&#x7684;&#x662F;2D&#x56FE;&#x5F62;&#x3002;&#x5728;CSS&#x4E2D;&#x6709;&#x4E24;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x56FE;&#x50CF;&#xFF1A;&#x7B80;&#x5355;&#x7684;&#x9759;&#x6001;&#x56FE;&#x50CF;&#xFF0C;&#x7ECF;&#x5E38;&#x88AB;&#x4E00;&#x4E2A;&#x5728;&#x4F7F;&#x7528;&#x7684;URL&#x5F15;&#x7528;&#xFF0C;&#x52A8;&#x6001;&#x751F;&#x6210;&#x7684;&#x56FE;&#x50CF;&#xFF0C;&#x6BD4;&#x5982;DOM&#x6811;&#x7684;&#x90E8;&#x5206;&#x5143;&#x7D20;&#x6837;&#x5F0F;&#x6E10;&#x53D8;&#x6216;&#x8005;&#x8BA1;&#x7B97;&#x6837;&#x5F0F;&#x4EA7;&#x751F;&#x3002;\"><code>&lt;image&gt;</code></a>\uff09. \u5b83\u63a5\u53d7\u548c\u666e\u901a\u7ebf\u6027\u6e10\u53d8\u76f8\u540c\u7684\u5c5e\u6027\u503c\u5e76\u4e14\u8868\u73b0\u4e5f\u4e00\u81f4,\u53c2\u8003<a href=\"/zh-CN/docs/Web/CSS/linear-gradient\" title=\"CSS linear-gradient()&#xA0;&#x51FD;&#x6570;&#x521B;&#x5EFA;&#x4E86;&#x4E00;&#x4E2A;&#x5448;&#x73B0;&#x7EBF;&#x6027;&#x6E10;&#x53D8;&#x989C;&#x8272;&#x7684;&#xA0;&lt;image&gt;&#x3002;&#x8BE5;&#x51FD;&#x6570;&#x7ED3;&#x679C;&#x662F;&#x4E00;&#x4E2A;CSS &lt;gradient&gt;&#x5BF9;&#x8C61;&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x3002;&#x50CF;&#x5176;&#x4ED6;&#x6E10;&#x53D8;&#x4E00;&#x6837;, &#x7EBF;&#x6027;&#x6E10;&#x53D8;&#x4E0D;&#x662F;&#x4E00;&#x4E2A;css&lt;color&gt;&#x4E14;&#x56FE;&#x50CF;&#x65E0;&#x5185;&#x5728;&#x5C3A;&#x5BF8;&#xFF1B;&#x5C31;&#x662F;&#x8BF4;, &#x5B83;&#x6CA1;&#x6709;&#x9ED8;&#x8BA4;&#x6216;&#x8005;&#x9996;&#x9009;&#x7684;&#x5927;&#x5C0F;&#x6216;&#x8005;&#x662F;&#x6BD4;&#x4F8B;&#x3002;&#x5B83;&#x7684;&#x5177;&#x4F53;&#x5C3A;&#x5BF8;&#x5927;&#x5C0F;&#x548C;&#x5B83;&#x5BF9;&#x5E94;&#x7684;&#x5143;&#x7D20;&#x7684;&#x5927;&#x5C0F;&#x76F8;&#x5339;&#x914D;&#x3002;\"><code>linear-gradient</code></a>, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the length of a basic linear gradient (the difference between the last color stop's position and the first one's position).", "sections": [{"id": "Quick_Links", "title": null}, {"id": "\u6982\u8981", "title": "\u6982\u8981"}, {"id": "Syntax", "title": "Syntax"}, {"id": "Values", "title": "Values"}, {"id": "Examples", "title": "Examples"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_Compatibility", "title": "Browser compatibility"}, {"id": "See_also", "title": "See also"}], "slug": "Web/CSS/repeating-linear-gradient", "review_tags": []}