您可以像使用SVG一样使用HTML作为背景吗？

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>

Answer 1

SVG <foreignObject>

您可以使用<foreighObject>将HTML嵌入SVG中，然后将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%;
}

element() CSS函数

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>