CSS content-visibility与background-image是否兼容？

问题 #

已知CSS的content-visibility和contain-intrinsic-size属性可作用于<img>标签，请问它们能否作用于background-image属性？以下代码中的这些属性是否会产生效果？

<span id="image"></span>

#id{
   height:50px;
   width:100px;
   content-visibility:auto;
   contain-intrinsic-size:50px;
}

回答 #

• content-visibility和contain-intrinsic-size是作用于HTML元素本身的CSS属性，并非直接针对background-image这类元素的背景属性。也就是说，无论元素是通过<img>的src展示图片，还是通过background-image设置背景图，只要给元素本身设置这两个属性，它们就会按照自身规则生效（比如content-visibility:auto会根据元素是否在视口内决定是否跳过渲染），但本质上不是作用于background-image这个属性。

• 你给出的代码里，这些属性不会产生任何效果：CSS选择器写的是#id，但目标元素的id是image，选择器和元素不匹配，属性根本不会应用到这个<span>上。

• 退一步说，就算把选择器改成#image，这两个属性生效的对象也是<span>元素本身——比如当元素不在视口内时，浏览器会跳过它的渲染（包括背景图），但这是元素整体的渲染控制，不是直接作用于background-image的特性。

内容的提问来源于stack exchange，提问作者namename