我该如何修复这个背景错误？

Question

我只想知道如何解决这个背景问题？它从 .box 的顶部和底部开始重复。有什么解决办法吗？

所以这是我的 HTML:

<body>
 <div class="box">
  <img src="https://s4.uupload.ir/files/e8hzocoxsamec01-removebg-preview_wxkl.png" width="100px"> <be>
  I love Unicorns!
</div>

还有我的CSS：

html, body {
  font-family: 'Zen Kurenaido', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: hsla(229, 86%, 81%, 1);
  background-image: linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -moz-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -webkit-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  height: 100%;
}

.box {
  background-color: #ffffff;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  padding: 18px;
  width: 400px;
  height: 300px;
}

这也是我的代码笔：Codepen

Answer 1

你的body不是全角

在html下添加，body

width:100%;

然后删除了重复效果。

我该如何修复这个背景错误？

how can i fix this background bug?

html

css

background