CSS 背景圖片代碼不顯示圖片
[英]CSS background-image code does not show up image
問題描述
嗨，我正在嘗試使用 HTML、bootstrap 和 css 構建一個小型網站（我是新手）。 但是在 css background-image 中不起作用。 我已經檢查了路徑和文件格式，它很好（實際上我使用括號 ide，當我將鼠標懸停在路徑上時，它會顯示圖像的縮略圖）。 這是我的代碼：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>My First Web Project</title>
</head>
<body>
<!-- NAVIGATION HEADER -->
<div class="header" id="topheader">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container text-uppercase p-2">
<a class="navbar-brand" href="#">MY WEBSITE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">ABOUT US</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">SERVICES</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">CONTACT US</a> </li>
</ul>
</div>
</div>
</nav>
<!-- BODY SECTION -->
<section class="header-section">
<div class="center-div">
<h1 class="font-weight-bold">Lorem ipsum dolor sit</h1>
<p>Hello we are developing this site</p>
</div>
<div class="header-buttons">
<a href="#">EXPLORE</a>
<a href="#">CONTACT</a>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
CSS：
*{padding:0; margin:0; box-sizing: border-box;}
.header
{
background: url('../images/background.jpg');
}
請幫忙！
3 個解決方案
解決方案1
1 2020-01-26 01:22:30
您是否檢查過您的瀏覽器 DevTools（右鍵單擊頁面並在 Chrome 中點擊 Inspect 或 CTRL+SHIFT+I）以查看是否有任何內容覆蓋了您的 CSS？
也可能是 URL 需要更改.. 嘗試將其更改為以下內容：
background-image: url('images/background.jpg');
如果您嘗試直接從網絡中輸入一個 URL 並且仍然不起作用，那么我建議檢查是否有什么東西覆蓋了代碼，也許在您的 CSS 行中聲明 !important 以查看是否可以區別。
我還遇到過一些圖像是 JPEG 並且不得不在 CSS 中將其從 JPG 更改的情況。 檢查您的瀏覽器開發工具以了解發生了什么。 希望這可以幫助！
解決方案2
0 2020-01-26 00:56:59
將您的 CSS 代碼更改為此並嘗試一下：
.header
{
background: url('images/background.jpg');
}
解決方案3
0 2020-01-26 07:21:26
您應該為具有背景大小的背景圖像的 div 提供寬度和高度：cover
.header
{
background: url('images/background.jpg');
height:auto;
width:100%;
background-size:contain
}
CSS 背景圖像不會顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.