Comment définir l'étirement d'une image sans répétition en CSS

Comment définir l'étirement de l'image sans duplication en CSS : définissez d'abord le chemin de l'image via "background: url("../../../static/imagic/sy.jpg")" ; " L'attribut "no-repeat" peut être utilisé pour que l'image ne soit pas répétée.

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur DELL G3

css réglage de l'image d'arrière-plan Étirez le plein écran sans duplication

Sans plus tard, allons-y et montrons l'image Nous n'avons donné que la largeur et la hauteur à 100% et cette situation se produira

<template>
  <div class="hello"></div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  }
};
</script>

<style scoped>
.hello {
  background: url("../../../static/imagic/sy.jpg") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;//全屏展示
}
</style>

background: url("../../../static/imagic/sy.jpg") ——L'emplacement du chemin de l'image ;

no-repeat—— Les images ne sont pas répétées

center 0px - le centre est le positionnement depuis le côté gauche de la page, 0px est le positionnement depuis le haut de la page ; 🎜>

background-position: center 0 - est le positionnement de l'image, le même que ci-dessus ;

background-size: cover - Agrandissez l'image d'arrière-plan à une taille suffisamment grande pour que l'arrière-plan l'image couvre complètement la zone d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone de positionnement de l'arrière-plan ;

min-height : 100vh ; - la hauteur de la fenêtre, "viewport" fait référence à la taille de la zone visible à l'intérieur du navigateur, c'est la taille window.innerWidth/window.innerHeight.

Apprentissage recommandé : "

Tutoriel vidéo CSS

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!