背景圖像設置僅顯示屬性列表項

-1

時，我一直在嘗試將背景圖片設置爲一個div在CSS即背景圖像設置僅顯示屬性列表項

React.createElement("div", {className: "icon"}) 

.icon { 
    background: url("../images/icons/icon.png") 0 0 no-repeat; 
}

似乎沒有任何可以顯示工作。我還驗證了圖像位於正確的位置。

然而，當我設置.icon到display: list-item即

.icon { 
    display: list-item; 
    background: url("../images/icons/icon.png") 0 0 no-repeat; 
}

在頁上的圖像出現。是否有任何理由爲什麼顯示列表項目的作品，但沒有別的會？有沒有辦法讓背景圖像工作，而不必使用display: list-item？

來源

2017-06-18 S0rn

這取決於：您的.icon DIV有任何內容？

因爲如果DIV不包含任何東西，它沒有大小（即高度爲零），所以你不會看到背景圖像。

但是，默認情況下，li總是至少有一行高（即爲其定義的行高），100％寬，即使沒有內容，也會看到背景圖像。 ..

來源

2017-06-19 00:09:14 Johannes

不，圖標div沒有內容。就像它在代碼片段中一樣。您對列表項的說法很有意義。我嘗試在我的空div上設置min-width和min-height，但它不能解決像'display：list-item'這樣的問題 – S0rn

嘗試下面的內容;

用下面的CSS代碼創建一個div：

div { 
    height: 400px; 
    width: 400px; 
    background-image: url("INSERT URL HERE"); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
}

這應該創建你的報價爲背景之間張貼的圖片在頁面上一個完美的正方形。

來源

2017-06-19 01:25:36 JamesTheHunt

背景圖像設置僅顯示屬性列表項

回答

相關問題