背景图片重复的烦恼

<style>
  .container {
    background-image: url('pattern.jpg');
    background-repeat: repeat;
    width: 300px;
    height: 300px;
  }
</style>

<div class="container"></div>

解决方法：使用 no-repeat 属性

<style>
  .container {
    background-image: url('pattern.jpg');
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
  }
</style>

<div class="container"></div>

定位背景图片

以下是一个使用 background-position 属性的示例：

<style>
  .container {
    background-image: url('pattern.jpg');
    background-repeat: no-repeat;
    background-position: center center; /* 将背景图片居中 */
    width: 300px;
    height: 300px;
  }
</style>

<div class="container"></div>

总结