css如何設(shè)置圖片拉伸不重復(fù)

這篇文章給大家分享的是有關(guān)css如何設(shè)置圖片拉伸不重復(fù)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

css設(shè)置圖片拉伸不重復(fù)的方法：首先通過(guò)“background: url("../../../static/imagic/sy.jpg")”設(shè)置圖片路徑；然后通過(guò)“no-repeat”屬性設(shè)置圖片不重復(fù)即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

css設(shè)置背景圖片拉伸全屏不重復(fù)

話不多說(shuō)直接上圖我們只給了寬和高100%就會(huì)出現(xiàn)這種狀況

<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") ——圖片路徑的位置；

no-repeat—— 圖片不重復(fù)；

center 0px——center是距離頁(yè)面左邊的定位，0px是距離頁(yè)面上面的定位；

background-position: center 0——就是圖片的定位，同上；

background-size: cover;——把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中；

min-height: 100vh;——視窗的高度，“視區(qū)”所指為瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/ window.innerHeight大小。

感謝各位的閱讀！關(guān)于“css如何設(shè)置圖片拉伸不重復(fù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！