gpt4 book ai didi

html - CSS - 在网站正文中添加背景图像不起作用。

转载 作者:太空宇宙 更新时间:2023-11-04 12:20:36 25 4
gpt4 key购买 nike

这里我有一些 css 样式可以改变我网站所有网页的布局,带有 900 像素宽的包装器、标题和主体。到目前为止,我已经更改了正文部分的背景颜色,效果很好。但是,如果我添加一些代码来更改背景图像,结果只是一个空白的白色背景,而不是我放置的图像。这是一个 JSFiddle:http://jsfiddle.net/o1snuexs/1/

这是我的 CSS 代码:

/*CSS FOR ALL PAGES*/

/*BODY/WRAPPER SECTION*/

body {background-image: url("SiteBackground.png");}

#wrapper {width: 900px;
margin: 0 auto;
background-color: white;}

/*TOP BANNER SECTION*/

#banner {background-color: black;}

#logo {margin-top: -90px;
margin-bottom: -140px;
text-align: center;}

#ip {margin-bottom: -55px;
margin-right: 687px;
float: right;
color: white;}

#teamspeak_logo {margin-left: 764px;}

/*TOP NAV BAR SECTION*/

* {margin: 0px;
padding: 0px;}

#nav_bar {background-color: #a22b2f;
box-shadow: 0px 2px 10px;
height: 45px;
text-align: center;}

#nav_bar ul {padding: 0;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
display: block;
text-decoration: none;
font-weight: normal;
padding-left: 10px;
padding-right: 10px;
line-height: 45px;
transition: all 0.5s ease;}

#nav_bar ul li ul {display: none;
list-style: none;
position: absolute;
background: white;
margin-left:0px;
box-shadow: 0px 2px 10px;
text-align: left;
z-index:1;}

#nav_bar ul li a.active-page {background-color: #8c1d20;}

#nav_bar ul li:hover ul li a {line-height: 2em;}

#nav_bar ul li a:hover {background: #8c1d20;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #252525;
display: block;}

#nav_bar ul li ul li a:hover {background: #4485f5;
color: white;}

/*BOTTOM FOOTER SECTION*/

#bottom_footer {height: 50px;
border-top: solid 10px black;
border-bottom: solid 10px black;
margin-top: 20px;}

#created_by {text-align: center;
margin: 17px;}

#social_media_youtube {float: left;
margin: -47px;
margin-left: 275px;}

#social_media_twitch {float: left;
margin: -44px;
margin-left: 335px;}

#social_media_twitter {float: right;
margin: -53px;
margin-right: 325px;}

#social_media_facebook {float: right;
margin: -47px;
margin-right: 285px;}

/*ELEMENT SELECTIONS SECTION*/

p {font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;
margin-right: 20px;}

ul {font-family: Arial, Helvetica, sans-serif;
margin-left: 37px;}

h3 {font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;}

h4 {font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;}

最佳答案

您的包装器覆盖了背景图像。从包装器中移除背景颜色,它就可以工作了。

#wrapper {width: 900px;
margin: 0 auto;
background-color: white;} <------remove this

关于html - CSS - 在网站正文中添加背景图像不起作用。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28394437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com