如何在我的 html/css 中顯示我的背景圖像？
[英]How to display my background-image in my html/css?
問題描述
我已經看到關於我的問題的另一個主題，但它沒有解決它，我嘗試為我的投資組合放置背景圖片，但它不起作用。 我不明白為什么，你有什么想法嗎？
我的代碼：
html：
<div class="main">
<div class="navbar container-fluid d-flex justify-content-center">
<i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i>
<i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
<i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
</div>
</div>
css:
.main{
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar{
height: 10vh;
background-color: purple;
position: fixed;
}
PS：對不起，我的英語不是我的母語。
5 個解決方案
解決方案1
0 2020-02-19 10:09:21
.main{ background-image: url('http://scontent-vie1-1.xx.fbcdn.net/v/t1.0-0/p640x640/86969955_2219297081712551_4370094468804640768_o.jpg?_nc_cat=108&_nc_ohc=RXVSJ86AsuoAX_l1w_j&_nc_ht=scontent-vie1-1.xx&_nc_tp=6&oh=f79e4654f5cee0a184fa73d9faa0af49&oe=5EFBD055'); background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 200px; } .navbar{ height: 10vh; background-color: purple; position: fixed; width: 100%; padding: 20px; }
<div class="main"> <div class="navbar container-fluid d-flex justify-content-center"> <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i> <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i> </div> </div>這就是你要找的？ 固定屬性使容器不會擴展，所以沒有背景顯示。
解決方案2
0 2020-02-19 10:12:15
您的類 'main' 的 div 元素沒有任何高度。 因此，背景圖像將不會顯示。
您可以執行以下選項之一：
給它一個固定的高度（不推薦）
.main {
height: 100px
}
將塊元素添加到導航欄，以便 main 自動獲取高度
.navbar {
display: block
}
在這種情況下也不要使用位置固定。
最后但並非最不重要的是，失去導航欄的背景顏色，這將位於主背景圖像的頂部。
我希望這有幫助！
解決方案3
0 2020-02-19 10:13:49
.main{ background-image: url('https://cdn.pixabay.com/photo/2020/02/14/04/20/old-city-4847469_960_720.jpg'); background-position: center top; background-repeat: no-repeat; background-size: cover; } .navbar{ height: 20vh; background-color: rgba(0,0,0,0.5); position: relative; width: 100%; z-index: 999; color: #fff; padding: 20px; }
<div class="main"> <div class="navbar container-fluid d-flex justify-content-center"> <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i> <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i> </div> </div>
解決方案4
0 2020-02-19 10:19:53
你提供了錯誤的路徑。 嘗試這個
<!DOCTYPE HTML> <html> <head> <style> .main{ background-image: url(http://www.cagbd.org/assets/upload/logo/1124d2b92e3b8f44b1c8f21cfebc6dae.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .navbar{ height: 10vh; } </style> </head> <body> <div class="main"> <div class="navbar container-fluid d-flex justify-content-center"> <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i> <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i> </div> </div> </body> </html>
解決方案5
0 2020-02-19 10:22:24
.main {
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;
}
如何在容器中顯示 html 圖像，就像 css 顯示背景圖像一樣？
[英]How can I display html image in a container the same way css displays background-image?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.