如何使背景圖像不重復自己

Question

這是我的代碼：

 div#bg { background-size: contain; background-repeat: no-repeat; }

 <div id="bg" v-bind:style="{ background: 'url(' + require('../assets/kafa.jpg') + ')' }">

所以，我想要的只是一個覆蓋整個頁面的圖像，但無論我做什么，它只是覆蓋整個頁面的 div 圖像重復本身（可能是因為我只訪問帶有屬性的 div 而不是圖像本身）。 我嘗試了不同的圖像大小，但結果總是一樣的。

這是它的樣子

謝謝。

EDIT1：我也試過 min-height: 100% 和 min-width: 100%，但還是不行。

Answer 1

你可以這樣做：

在組件中（用background-image替換background ：

<div  id="bg" v-bind:style="{ 'background-image': 'url(' + require('./assets/2.jpg') + ')' }">

在 CSS 中：

div#bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}