svg作为背景html

Question

我正在尝试将svg用作背景，但是它不适合容器。

请您帮忙

谢谢

    <div class="section" style="position: relative;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum reprehenderit ipsum quo harum facilis voluptates porro tempora dolore mollitia nisi veniam, incidunt optio velit in facere nemo. Placeat blanditiis, ad distinctio asperiores quod ratione dicta modi. Explicabo eligendi odit necessitatibus ullam magni, illum dolores et magnam tenetur numquam facilis cum commodi fuga accusantium molestiae possimus? Praesentium, iste deserunt! Sapiente, sunt quas. Ipsa fugiat quaerat aliquid voluptates, expedita necessitatibus? Dolorum a tempore ratione? Ipsum reprehenderit nihil eveniet aliquid quibusdam pariatur nesciunt. Nam veritatis voluptates voluptatem deleniti iste pariatur ratione, sequi laborum temporibus minus non dicta ab tempore reiciendis sunt consequatur nemo, quisquam error ullam? Necessitatibus dolor ducimus culpa atque, doloribus enim. Eveniet repudiandae temporibus, autem rerum dolor, eius quod quaerat neque sapiente doloribus dolore ipsam veniam dolores fugiat? Nesciunt explicabo nemo commodi porro, obcaecati quisquam quis autem deserunt vero quia quidem maxime nostrum rerum amet, nam excepturi architecto odio ut, facilis aliquid aperiam et odit corporis. </p>
        <svg viewBox="0 0 100 100" style="position:absolute; top:0; z-index: -100;">
            <polygon fill="red" points="0,20 100,0 100,80 0,100"/>
        </svg>
   </div>

Answer 1

您必须使用CSS将svg设置为背景。

您可以像在文件夹中的图像一样使用svg：

.element {
    background-image: url(/images/image.svg);
}

或直接在CSS上使用：

.element {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='red' points='0,20 100,0 100,80 0,100'/%3E%3C/svg%3E");
} 

使用svg编码器https://yoksel.github.io/url-encoder/