Question

我正在尝试将背景图像设置为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>

Answer 1

你是OS X吗？

如果是，并且您已确认图像的路径正确，则它可能是具有扩展属性的隔离文件。

阅读此SO帖子以获取有关如何解决的信息： How do I remove the "extended attributes" on a file in Mac OS X?

Answer 2

一切似乎都很好

我试过你的代码并且工作正常。

请检查您的控制台（按浏览器上的f12按钮），看看您遇到了什么错误。

Answer 3

查看您考虑文件夹层次结构的天气。例如，如果您的css文件位于/css文件夹中，并且您的图片位于/images文件夹中，并且两个文件夹都位于您的主文件夹中，那么您的css文件中的网址images/back.jpg指向/css/images/back.jpg，这是不正确的。

您可以在图像地址前加一个点，这意味着“转到父目录”（意味着退出/css然后查找/images）或者您可以移动{{1 }}文件夹到你的css文件夹，以你更舒服的为准。

身体背景图像不显示

3 个答案: