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

Question

所以新的图片元素看起来像这样：

<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 元素，而不是图片元素。

但是，我在规范中看不到任何规范性内容表明图片元素默认将被视为内联元素以外的任何内容，因此我希望您能够使用不同的display设置对其进行样式设置，给它填充等等，就像你对span元素所做的一样，在这种情况下，背景颜色的行为方式与今天围绕 img 元素的 span 元素的行为方式相同。

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