如何给出背景svg图像repeat-x属性？我试图svg repeat-x但它没有工作。给我解决方案。 [英] How to give background svg image repeat-x property? I am trying to svg repeat-x but it not working.give me solution.
本文介绍了如何给出背景svg图像repeat-x属性？我试图svg repeat-x但它没有工作。给我解决方案。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何给背景svg图像重复x属性？我正在尝试svg repeat-x但它没有工作。给我解决方案。
我尝试过：
我的代码是这样的
background-image：url（../ images / cloud-1.svg）;
background-repeat：repeat-x;
宽度：100％;
身高：200px;
显示：阻止;
背景大小：100％150px;
解决方案
我没有你的HTML或你的图像，但这就是我所知道的。使用可缩放矢量图形（SVG）图像，您必须添加图像的精确高度和宽度。在您的示例中，您将背景大小设置为100％;哪个不行。下面是适当的SVG作为水平重复背景图像的工作示例。如果您想深入挖掘，那么这里有一篇好文章：使用SVG | CSS-Tricks [ ^ ]
< ！DOCTYPE html > ;
< html >
< head >
< style >
body {
background-image < span class =code-keyword>： url（https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg / 240像素，SVG_log o.svg.png）;
background-repeat ： repeat-x;
background-size ： 240px 240px;
}
< / style >
< / head >
< 正文 >
< p > repeat-x将仅水平重复背景图像。< / p >
< / body >
< / html >
How to give background svg image repeat-x property?i am trying to svg repeat-x but it not working.give me solution.
What I have tried:
My code like this
background-image: url(../images/cloud-1.svg);
background-repeat: repeat-x;
width: 100%;
height: 200px;
display: block;
background-size: 100% 150px;
解决方案
I do not have your HTML or your image, but this is what I know. With the Scalable Vector Graphics (SVG) image, you must add the exact height and width of the image. In your example, you have background-size set at 100%; which will not work. Below is a working example of proper SVG as a horizontal repeating background image. If you'd like to dig deeper, then here is a good article: Using SVG | CSS-Tricks[^]
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/240px-SVG_logo.svg.png"); background-repeat: repeat-x; background-size: 240px 240px; } </style> </head> <body> <p>repeat-x will repeat a background image only horizontally.</p> </body> </html>
这篇关于如何给出背景svg图像repeat-x属性？我试图svg repeat-x但它没有工作。给我解决方案。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
