html - 你可以使用 HTML 作为背景，因为你可以使用 SVG 作为背景吗？

Question

你可以使用 HTML 作为背景，因为你可以使用 SVG 作为背景吗？

SVG 作为背景示例：

.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");
}

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

HTML 作为背景示例：

.element {
    background-image: url("data:html, %3Cdiv%3EHello%3C/div%3E");
}

.element {
    background-image: url(/stuff.html);
}

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

.element2 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("%3Cdiv%3EHello%3C/div%3E");
}


div {
  outline: 1px dashed blue;
}

<div class="element">Aliquam convallis nulla dui, vel efficitur ante mollis et. Ut ornare mauris sit amet tellus eleifend placerat. Nullam bibendum orci at erat tristique, id condimentum nisl consectetur. Ut eleifend a enim ut malesuada. Curabitur a massa ipsum. In hac habitasse platea dictumst. Pellentesque pellentesque accumsan massa non commodo. Ut sit amet tellus non lectus accumsan pellentesque nec in ipsum. Cras pulvinar tortor non odio semper rhoncus. Aenean id arcu imperdiet dolor volutpat semper sed eu neque. Aenean risus elit, auctor id elementum a, cursus ut metus.</div>

<div class="element2">Aliquam convallis nulla dui, vel efficitur ante mollis et. Ut ornare mauris sit amet tellus eleifend placerat. Nullam bibendum orci at erat tristique, id condimentum nisl consectetur. Ut eleifend a enim ut malesuada. Curabitur a massa ipsum. In hac habitasse platea dictumst. Pellentesque pellentesque accumsan massa non commodo. Ut sit amet tellus non lectus accumsan pellentesque nec in ipsum. Cras pulvinar tortor non odio semper rhoncus. Aenean id arcu imperdiet dolor volutpat semper sed eu neque. Aenean risus elit, auctor id elementum a, cursus ut metus.</div>

标签： htmlcsssvg

Answer 1

SVG<foreignObject>

您可以在 SVG 中嵌入 HTML，<foreighObject>然后使用 SVG 作为背景图像：

body {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E div %7B color: white; font: 18px serif; height: 100%25; overflow: auto; %7D %3C/style%3E%3Cpolygon points='5,5 195,10 185,185 10,195' /%3E%3C!-- Common use case: embed HTML text into SVG --%3E%3CforeignObject x='20' y='20' width='160' height='160'%3E%3C!-- In the context of SVG embedded in an HTML document, the XHTML namespace could be omitted, but it is mandatory in the context of an SVG document --%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat. %3C/div%3E%3C/foreignObject%3E%3C/svg%3E");
  background-size: 100%;
}

CSSelement()函数

CSS4 有一个element()草稿，它允许您通过元素的 id 获取元素，并将其用作图像。

示例（目前仅限 Firefox）：

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
  </div>
</div>