用圖像覆蓋整個模態

我正在使用Materialise CSS。我有一個模式，我想將整個背景設置爲一個圖像（所以當它打開時，它看起來像只是在模糊的網頁背景下查看一張漂亮而大的圖像）。問題是，當我這樣做時，如果模態比它大，圖像會重複。用圖像覆蓋整個模態

我希望圖像能夠延伸到整個模態。

我的模式：

<div id="imageModal" class="modal"> 
    <div class="modal-content"> 

    </div> 
</div>

CSS：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: "none"; 
    height: 50%; 
    width: 100%; 
}

來源

2016-06-30 unconditionalcoder

您有一些錯字與背景重複。試試這個：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    height: 50%; 
    width: 100%; 
}

另外，如果你使用CSS3，你可以設置background-size屬性cover所以這將有助於根據您的模態大小調整圖片的大小。就像這樣：

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
}

來源

2016-06-30 01:07:37

Hi加在你的風格...

background-repeat: no-repeat;

只是檢查並覈對其u有背景重複的樣式：沒有這是三振已經becz沒有風格一樣，所以只需更換上述一個

來源

2016-06-30 01:09:24

這裏嘗試了這一點

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
}

參考

https://css-tricks.com/perfect-full-page-background-image/

來源

2016-06-30 01:31:50

用圖像覆蓋整個模態

回答

相關問題