html - 背景图像所有屏幕分辨率(我的代码剪切照片)

Question

背景图片我想调整到所有分辨率，但是写background-size: cover;时整张图片都看不到，被切成两半，为什么？

*, html{
    margin:0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-image: url('../img/image3.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Answer 1

删除您拥有的整个样式规则。您可能希望您的 html 具有默认的边距、填充和宽度属性，但是您可以在元素进行得更深入时处理这些属性。现在，将 html 和 body 的高度设置为 100%。然后将背景图片附加到您的 body 标签，这样它就会始终占据 100% 的视口(viewport)。我也为你的 body 标签添加了颜色和边距，因为颜色将被你的 html 继承，这里的边距是一种“重置”样式，以确保浏览器不会在 body 标签周围放置边距:

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: white;
  background-image: url(http://placekitten.com/500/500);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

This is text directly inside the body tag.
<p>This is html inside the body tag, it should have its own styling</p>