背景圖像不會出現在 CSS 中
[英]Background image wont show up in CSS
問題描述
在過去的幾個小時里，我一直試圖將圖像作為背景放在 HTML 元素中，但是，在我放入導航欄后，背景不知何故不會出現，我認為它與導航欄背景有關優先，但老實說我不知道。
HTML，CSS
@charset: "utf-8"; html { background-image: url(../design/background.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: right; } li a { display: block; color: #fff; text-align: center; padding: 27px 60px; text-decoration: none; font-family: 'Abel', sans-serif; } li a:hover { background-color: #7446ad; } #logo { float: left; width: 100px; height: 60px; padding: 5px 5px; }
<.DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles:css"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2.family=Abel&display=swap" rel="stylesheet"> </head> <body> <nav> <div> <ul> <li><a href="#">SUPPORT</a></li> <li><a href="#">STORE</a></li> <li><a href="#">TEAMS</a></li> <a class="navbar-brand"> <img src="asd2.png" id="logo"> </a> </ul> </div> </nav> </body> </html>
由於某種原因，即使我將html選擇器更改為body選擇器，背景圖像也不會顯示為背景。 .
2 個解決方案
解決方案1
0 已采納 2021-03-13 07:19:56
It seems you moved your css into it's own file styles.css but forgot to get rid of the enclosing html <style> tags.
刪除它們，理論上我相信圖像會加載。
也改變
@charset: "utf-8";
至
@charset "utf-8";
但這與問題無關。
解決方案2
-1 2021-03-13 07:27:07
我嘗試替換您提供的圖像，它可以正常工作。 它看起來不像 css 問題，而是您在 css 中提供的圖像路徑。
html{ background-image: url(https://placeimg.com/640/480/animals); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } ul{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li{ float:right; } li a{ display: block; color: #fff; text-align: center; padding: 27px 60px; text-decoration: none; font-family: 'Abel', sans-serif; } li a:hover{ background-color: #7446ad; } #logo{ float:left; width: 100px; height: 60px; padding: 5px 5px; }
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet"> </head> <body> <nav > <div> <ul> <li><a href="#">SUPPORT</a></li> <li><a href="#">STORE</a></li> <li><a href="#">TEAMS</a></li> <a class="navbar-brand"> <img src="asd2.png" id="logo"> </a> </ul> </div> </nav> <div> </div> </body> </html>
背景圖像css，圖像不會出現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.