{"json_modified": "2016-09-16T03:46:24.436556", "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"], "translations": [{"uuid": "fc6e22bb-690e-43db-9497-bc2f66660cc4", "title": "repeating-linear-gradient", "url": "/fr/docs/Web/CSS/repeating-linear-gradient", "tags": ["CSS", "Fonction", "R\u00e9f\u00e9rence"], "summary": "La fonction CSS <strong><code>repeating-linear-gradient</code></strong> 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> compos\u00e9e de d\u00e9grad\u00e9s qui se r\u00e9p\u00e8tent. Cela fonctionne de mani\u00e8re similaire aux d\u00e9grad\u00e9s lin\u00e9aires simples d\u00e9crits les m\u00eames arguments que les d\u00e9grad\u00e9s lin\u00e9aires basiques repr\u00e9sent\u00e9s avec <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 (les points d'arr\u00eat sont r\u00e9p\u00e9t\u00e9s d'autant que la distance qui s\u00e9pare le premier et le dernier point d'arr\u00eat).", "localization_tags": [], "locale": "fr", "last_edit": "2016-09-16T03:46:12", "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 href=\"/ja/docs/Web/CSS/image\" 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;\"><code>&lt;image&gt;</code></a> \u3092\u4f5c\u308a\u307e\u3059\u3002<a href=\"/ja/docs/Web/CSS/linear-gradient\" 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;\"><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": []}, {"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 href=\"/pt-BR/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><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 href=\"/pt-BR/docs/Web/CSS/linear-gradient\" title=\"The documentation about this has not yet been written; please consider contributing!\"><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": "4e808ea5-c146-49c4-8084-8a47171df58e", "title": "repeating-linear-gradient", "url": "/zh-CN/docs/Web/CSS/repeating-linear-gradient", "tags": [], "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).", "localization_tags": ["inprogress"], "locale": "zh-CN", "last_edit": "2016-06-29T05:09:54", "review_tags": []}], "modified": "2016-09-15T06:21:18", "label": "repeating-linear-gradient()", "localization_tags": [], "locale": "en-US", "id": 746, "last_edit": "2016-09-15T06:20:37", "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).", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Syntax", "title": "Syntax"}, {"id": "Values", "title": "Values"}, {"id": "Formal_syntax", "title": "Formal syntax"}, {"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": []}