我正在做一个django
项目,我的CSS
文件没有显示一切例如,我想放一张背景图片但它不起作用而且没有产生任何错误
我附加我的CSS
文件和我的代码在base.html
<body id="p" style="background-image: url({% static 'assets/background.jpg' %}')"></body>
首先你应该看看你的样式标签是否在head标签中被扭曲了。然后你应该确保你的样式标签的格式是正确的
下面是一个例子:
<head>
<!-- this is how to link a style sheet -->
<link rel="stylesheet" href="stylesheet.css">
</head>
接下来,你应该检查图像是否被正确加载到css中,并且你没有犯任何错误。我注意到你试图将评论中的图像加载到<p>
标签中,而不是将其加载到整个正文或div
中。下面是一个如何使用css的例子:
body {
background-image: url('https://i.stack.imgur.com/JggW3.png')
}
<!DOCTYPE html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<head>
<body id="p" style="background-image: url({% static
'https://i.stack.imgur.com/qmuok.png' %}')">
</html>
最后,如果所有这些都失败了,试着做一个CSS。基本上,CSS rest是有效的,因为浏览器在渲染CSS的方式上有差异,并且通常有默认值,这可能会导致事情呈现不同。基本上CSS重置会设置所有默认值,比如padding为0
这是CSS重置代码:
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
css