如何将 <picture> 设置为元素的背景图片？ [复制]答案

【问题标题】：How to set a <picture> as the background image for an element? [duplicate]如何将 <picture> 设置为元素的背景图片？ [复制]
【发布时间】：2021-04-21 22:01:11
【问题描述】：

我有一个图片元素。如何使用它来获得与拥有background-image: url("i.jpg"); 相同的效果？

<picture>
    <source srcset="i-big.webp"
            media="(min-width: 768px)">
    <source srcset="i-small.webp">
    <img src="i.jpg" alt="Background image"/>
</picture>

【问题讨论】：

给它一个负的 z-index 以将其移动到背景。使用position: absolute; inset: 0;使其跨越整个相对元素。

标签： html css

【解决方案1】：

您不能像使用背景图像一样使用图片元素。 background-image 与元素的背景有关，可以保持原始尺寸（重复或居中等），但如果调整图片元素的大小，它只会被拉伸。

【讨论】：