所以新的 Picture 元素如下所示：
<picture>
<source ... />
<img browsers will fall back to this width="10" height="10" />
</picture>
在我们的 CSS 中，我们想设置一个背景颜色。
picture {background-color: red};
img {background-color: yellow};
启用图片的浏览器是否只会显示红色背景，而未启用图片的浏览器会显示黄色背景？或者两者的结合。同样，启用图片的浏览器会看到 img 元素的高度/宽度属性，还是完全忽略 img 元素？
【问题讨论】：
picture 元素的想法是它只是为其封闭的 img 元素提供源信息，并且始终呈现的是 img 元素，而不是图片元素。
但是，我在规范中看不到任何规范表明图片元素默认情况下将被视为内联元素以外的任何内容，因此我希望您能够使用不同的 @987654321 对其进行样式设置@设置，给它填充等，就像你对span元素所做的那样，在这种情况下，背景颜色的行为方式与今天围绕img元素的span元素的行为方式相同。
因此同时定位两者可能是合适的。背景将像往常一样简单地分层。但是 img 将被渲染，因此在您的场景中，图像后面的背景将是黄色的，当然假设 img 至少具有一定程度的透明度。
【讨论】：
由于没有浏览器支持它，猜测我们需要等待看到实现，但从目前的外观来看，根据当前文档，似乎 img 标签将被完全忽略，仅用作备用。
新的实现如下：
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
由于您需要将 <picture> 元素内的图像定义为源，并且您不会有 img 标签，因此在具有 Picture 实现的浏览器中实现不应该识别 img 标签内的任何内容，除非媒体 src 不是t 定义。
但是，很容易看出这种方法会导致图像的双重下载，因为浏览器会首先下载所有<img> 标签。因此，有一个proposal by David Newton: 使用<object> 或<embed> 作为备用图像容器，以避免重复下载图像。
综上所述，我们只需要等待，但总之，我的回答是你的第一个选项picture {background-color: red};是正确的
【讨论】：
<picture> 元素背后的整个想法是将其用于响应式布局。请参阅我的示例代码：您将下载 high-res.jpg、mid-res.jpg 和 low-res.jpg，然后是 fallback.jpg。当然，您可以使用 high-res.jpg 而不是后备，以确保覆盖所有尺寸。在这种情况下，您甚至不需要 <picture> 元素。如果你使用 mid-res.jpg 作为后备，你的图像在大屏幕上看起来会很糟糕。
<picture> 元素都会有两次下载