背景图像不会出现在 CSS 中
[英]Background image wont show up in CSS
问题描述
I've been trying to put an image as a background in the HTML element for the past few hours, however, the background somehow won't show up after I put in the navbar, I assume it has something to do with the navbar background taking priority but honestly I have no idea.
在过去的几个小时里，我一直试图将图像作为背景放在 HTML 元素中，但是，在我放入导航栏后，背景不知何故不会出现，我认为它与导航栏背景有关优先，但老实说我不知道。
HTML, CSS 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>
The background image won't show up as the background for some reason, even if i change the html selector to body selector.由于某种原因，即使我将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. It seems you moved your css into it's own file styles.css but forgot to get rid of the enclosing html <style> tags.
Remove them and in theory i'm confident the image will load.删除它们，理论上我相信图像会加载。
Also change也改变
@charset: "utf-8";
to至
@charset "utf-8";
but this is not relevant to the question.但这与问题无关。
解决方案2
-1 2021-03-13 07:27:07
I tried replacing the image you provided, its working.我尝试替换您提供的图像，它可以正常工作。 It doesnt look like css issue, but rather with image path you provided in css.它看起来不像 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.