背景图像所有屏幕分辨率（我的代码剪切照片）

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%。然后将背景图像附加到您的身体标签，因此它将始终占据视口的 100%。我也为你的 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>