Question

所以新的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元素被完全忽略？

Answer 1

图片元素的想法是它只是为其包含的img元素提供源信息，并且它始终是渲染的img元素，而不是图片元素。

但是，我在规范中看不到任何规范，表明默认情况下将图片元素视为内联元素以外的任何内容，因此我希望您能够使用不同的{{ 1}}设置，给它填充等，就像使用display元素一样，在这种情况下，background-color的行为方式与img元素周围的span元素的行为方式相同今天。

因此，针对两者都可能是合适的。背景将简单地分层。但img将被渲染，因此在你的场景中，图像背后的背景将是黄色的，当然假设img至少具有一定程度的透明度。

Answer 2

由于没有浏览器支持它，我猜我们需要等待才能看到实现，但到目前为止看起来并且根据当前的文档，似乎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没有定义。

然而，由于浏览器首先下载所有<img>标签，因此很容易看到此方法会导致双重下载图像。因此，有一个proposal by David Newton：使用<object>或<embed>作为后备图像容器，以避免重复下载的图像。

以上所述，我们只需要等待，但简而言之，我的回答是你的第一个选项picture {background-color: red};是正确的

在CSS中定位Picture元素时，我们应该使用img还是图片选择器？

2 个答案: