我试图用一张或多张图像作为背景，并希望将其更改为视频也很简单，以备不时之需。
然而，对于<img>，我注意到了一个问题，而对于CSS，我无法复制<img>所做的内容，所以我提出了<video>及其属性poster。
我想知道这是不是个好主意。下面我解释了我尝试的内容和示例，以便您可以看到<img>和CSS之间的区别。
我把<img>作为背景。唯一的问题是它是可选择的，但也有像user-select这样的属性，但IE这样的浏览器不支持它
以下是<img>:的示例
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background-color: #090909;
}
div.background {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -1;
overflow: hidden;
}
div.background img {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
height: auto;
width: auto;
top: 0;
}<html>
<body>
<div class="background">
<img src="https://i.imgur.com/sMzN1LP.png" draggable="false">
</div>
<div style="color: white;">Text</div>
</body>
</html>https://jsfiddle.net/hd6orszb/1/
在这里，当你缩小时，图像会停留在屏幕上，就像background-size: cover一样。当你放大时，在放大超过100%后，它也会放大图像。这还可以，但是<img>可以被拖动和选择，而user-select在任何地方都不起作用。属性"；可拖动的"；但是，即使添加了user-select: none;，如果按CTRL+A并拖动Text，在Chrome中至少也可以看到拖动的图像。我不想那样。
所以我使用了CSS，因为"；背景"；属性：
https://jsfiddle.net/5n6mtyb4
现在，如果你缩小并放大，没有什么能像我对<img>所做的那样不断调整它的大小，所以我添加了background-size: cover。但如果你放大和缩小，它会保持不变，但我想保持<img>的效果。
所以我不知道我还能做什么。我想@media可能有点难，因为它在缩放，我想任何东西都可以有不同的大小。
另一件事是使用具有poster属性的<video>。
https://jsfiddle.net/5n6mtyb4/1/
它和CSS一样是不可选择的，行为也和<img>一样，只是不可选择。然而，我不确定这是否是理想的方式，也不确定是否会有任何问题。
所以我想知道，是否有更好的方法，或者<video>作为<img>的替代品是否完全可以。
对于IE9，你需要添加unselectable="on"属性，就像user-select:none;一样，对于拖动，你可以添加draggable=flase，我发现背景是理想的，但视频也很好，使用海报也没有问题。
编辑11月20日：您可以将psuedo元素设置为before或after，它们将不可选择也不可拖动，但您不能在url(img)上设置width或height
您可以通过将以下行添加到图像的CSS中来实现这一点：
img {
user-drag: none;
user-select: none;
}
这应该是答案。