我正在尝试为 body 元素设置背景图像，但它没有显示，我多次检查了目录以及图像名称和扩展名，一切似乎都很好，但图像没有显示 :/
我的 CSS
body {
margin: 0px;
padding: 0px;
font-family:'Muli', sans-serif;
background-image:url('images/back.jpg');
background-repeat:repeat-x;
background-attachment:fixed;
background-position:center;
height: 100%;
}
header {
background-image:url('images/wallpaper1.jpg');
background-repeat:repeat-x;
margin: 0px;
padding: 0px;
min-height:150px;
}
.zoom {
height: 140px;
margin: 20px;
position: relative;
-webkit-shadow: 6px 7px 11px 0px rgba(46, 44, 50, 0.75);
-moz-shadow: 6px 7px 11px 0px rgba(46, 44, 50, 0.75);
shadow: 6px 7px 11px 0px rgba(46, 44, 50, 0.75);
}
#wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
/* works with row or column */
flex-direction: row;
/* -webkit-align-items: center;
align-items: center;*/
-webkit-justify-content: center;
justify-content: center;
}
#main {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
#ajax-main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
/* works with row or column */
flex-direction: row;
/* -webkit-align-items: center;
align-items: center;*/
-webkit-justify-content: center;
justify-content: center;
background-image:url('images/mohammed meme2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
#content {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
min-width:500px;
min-height:300px;
text-align: center;
padding-top:2em;
}
#content > a {
margin: 0 auto;
text-decoration:none;
font-size:1.875em;
font-weight: bold;
color: #2c67ac;
}
.tabbed_area {
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
ul.tabs {
margin:0px;
padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.tabs li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 {
display:none;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
和html
<!DOCTYPE html>
<html>
<head>
<title>Winter Olympics' Champions</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
<meta name="description" content="Educational apps for Android devices, smartphones, tablets. Language learning, coding, studying, various subjects." />
<meta name="keywords" content="Android app, educational, language learning, self study, mobile devices, smartphone, tablet" />
<link rel="stylesheet" type="text/css" href="styles/stylewinter.css" />
</head>
<body>
<header>
<div id="tagline">
<h1>Winter Olympics' Champions</h1>
<h2>the best in their category</h2>
</div>
</header>
<nav>
<div id="wrapper">
<a class="loadnew" href="skiing.php"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a>
<a class="loadnew" href="biathlon.php"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a>
<a class="loadnew" href="bobsleigh.php"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a>
<a class="loadnew" href="icehokey.php"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a>
<a class="loadnew" href="luge.php"><img class="zoom" src="images/luge.png" alt="luge" /></a>
<a class="loadnew" href="skating.php"><img class="zoom" src="images/skating.png" alt="skating" /></a>
</div>
</nav>
<div id="contentwrapper">
<div id="ajax-main">
</div>
</div>
<footer>
</footer>
<script src="scripts/my_scripts.js"></script>
</body>
</html>
最佳答案
您使用的是 OS X 吗？
如果是这样并且您已确认图像路径正确，则它可能是具有扩展属性的隔离文件。
阅读这篇 SO 帖子，了解有关如何解决的信息: How do I remove the "extended attributes" on a file in Mac OS X?
关于css - 正文背景图片不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23686088/