html-背景圖片未加載圖片
[英]html - background-image not loading image
問題描述
我正在學習如何制作一個簡單的全屏目標網頁，並且在加載背景圖片時遇到了一些問題。
目錄結構：
fullscreen_test/
├── css/
| │
| └── landing.css
├── images/
│ └── warehousing-04.jpg
└── index.html
index.html
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" type="text/css" href="css/landing.css">
</head>
<body>
<section class="landing">
<div class="container">
<div class="content">
<h1>Testing</h1>
<a class="btn" href="#">What Up</a>
</div>
</div>
</section>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
</body>
</html>
landing.css
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.landing {
height: 100%;
width: 100%;
background-image: url("/images/warehousing-04.jpg") no-repeat;
}
我嘗試將網址放在雙引號，單引號和無引號中，但仍然沒有樂趣。 嘗試在路徑前添加/並將其刪除，結果相同。 嘗試使用background標簽，也一無所獲。 只是應該保留圖像的大空白空間。 也許有人可以看到我正在犯的錯誤，因為我不能，而且我已經看了一個小時了。
感謝您提供的任何幫助。
2 個解決方案
解決方案1
3 已采納 2018-01-22 12:53:55
我為此創建了一個小提琴。 看一看
https://jsfiddle.net/cooltammy/c2z2khLq/
只需與更改的CSS一起使用
.landing {
height: 100%;
width: 100%;
background-image: url("../images/warehousing-04.jpg");
background-repeat: no-repeat;
}
解決方案2
0 2018-01-22 13:36:58
一個解釋，為什么您的方法不起作用。
查看您的文件夾結構：
fullscreen_test/
├── css/
| │
| └── landing.css
├── images/
│ └── warehousing-04.jpg
└── index.html
您的嘗試
background-image: url("/images/warehousing-04.jpg");
不起作用，因為/返回到root文件夾，在這種情況下，它是包含fullscreen_test的“文件夾”。 因此，您要告訴CSS從名為images的文件夾中加載圖片，該文件夾與fullscreen_test處於同一級別。 該文件夾不存在。
第二種方法，在一開始就刪除斜線：
background-image: url("images/warehousing-04.jpg");
現在，您要告訴css從css所在的同一文件夾內的文件夾images加載圖片。同樣，該文件夾不存在。
正確的解決方案：
background-image: url("../images/warehousing-04.jpg");
從css文件夾上移一個級別（如.. ），因此我們回到fullscreen_test 。 現在，我們進入文件夾images （在fullscreen_test下確實存在），然后加載圖像。
第二個選擇
background-image: url("/fullscreen_test/images/warehousing-04.jpg");
也可以使用，但是需要您有該fullscreen_test文件夾。 從名稱來看，它將來會被刪除或重命名，因此它不像其他解決方案那樣好。
CSS 背景圖像未加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.