Member 12656556 Ответов: 1

Как придать фоновому 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.


Что я уже пробовал:

Мой код такой

background-image: url (../images / cloud-1. svg);
фон-повтор: повтор-x;
ширина: 100%;
высота: 200px;
дисплей: блок;
размер фона: 100% 150px;

1 Ответов

Рейтинг:
5

jgakenhe

У меня нет вашего HTML или вашего изображения, но это то, что я знаю. С помощью изображения масштабируемой векторной графики (SVG) необходимо добавить точную высоту и ширину изображения. В вашем примере размер фона установлен на 100%, что не будет работать. Ниже приведен рабочий пример правильного SVG в виде горизонтального повторяющегося фонового изображения. Если вы хотите копнуть глубже, то вот хорошая статья: Использование SVG | CSS-трюков[^] 


<!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>