如何给出背景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屋!
查看全文