我正在尝试在 CodePen 中创建一个由 GIFS 组成的无限循环网站（链接：https://codepen.io/sofiazymnis/pen/yLNQWWR ?editors=1111 ）。由于某种原因，第一个 GIF 的顶部有一个边距，这破坏了无限滚动循环的无缝性。我尝试了 margin-top: 0; 但它似乎不起作用。有任何想法吗？html:<html><head><style>body { height: 7000px; /* Used to enable scrolling */ background: linear-gradient(#86c2db 0%, #c8a096 40%, #263c63 60%, #86c2db 100%); /*background-size: 100% 1000vh;*/ /*background-repeat:repeat-y;*/}::scrollbar { display: none;}</style></head><body> <img src="https://pro2-bar-s3-cdn-cf3.myportfolio.com/90c10bc74835779c958d7b88b56e6448/4272adea-61c3-4477-b8d0-a6f5ae78f511.gif?h=55dafeb4ec2ea49fe386c59f2590d02c"/>CSS：$blue: #a3d5d3;body { background-color: $blue;}img{ display:block; margin:auto; line-height: 0; max-width:50%;}
2 回答
BIG阳
TA贡献1859条经验 获得超6个赞
body上面有一个边距。如果我进入检查器，我可以应用margin-top: 0到 body 元素，这样就消失了。
在你的 CSS 中尝试一下，祈祷它能工作。
此外，正如 Ron 指出的，您使用的是 SASS 变量而不是 CSS 变量。
:root {
--blue: #a3d5d3;
}
body {
background-color: var(--blue);
margin-top: 0;
}
ITMISS
TA贡献1871条经验 获得超8个赞
margin:0;仅将 或添加margin-top: 0;到body{}CSS 部分，而不是图像本身。
codepen 不会验证它，因为 $blue 不是 CSS 属性，而是 SCSS .. 所以请删除 $blue 变量并尝试使用静态值，codepen 将正确渲染它，如下所示：
body {
background-color: #a3d5d3;
margin-top: 0;
}
- 2 回答
- 0 关注
- 56 浏览
添加回答
举报
0/150
提交
取消