00017.【CSS】关于background-repeat的更多案例


<template>
  <ol>
    <li>no-repeat
      <div class="one">&nbsp;</div>
    </li>
    <li>repeat
      <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
      <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
      <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
      <div class="five">&nbsp;</div>
    </li>
  </ol>
</template>

<script setup>

</script>

<style scoped>
li {
  margin-bottom: 12px;
}

div {
  background-image: url("../assets/big-star.png");;
  width: 144px;
  height: 84px;
}

.one {
  background-repeat: no-repeat;
}

.two {
  background-repeat: repeat;
}

.three {
  background-repeat: repeat-x;
}

.four {
  background-repeat: repeat-y;
}

.five {
  background-image:  url("../assets/big-star.png"),url("../assets/star.png");
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

</style>