douwenpin0428 2017-05-01 18:37
浏览 78
已采纳

我的图像和样式没有渲染

I am not sure why my images and style are not rendering. I have tried ../../, I have tried without the / and I have tried just ../.

This is my index.php:

<!DOCTYPE html>
<html>
<head>
    <title>MicroUrb</title>
    <link rel="stylesheet" href="/assets/styles.css">
</head>
<body id="final-example">
    <div class="wrapper">
        <div id="banner">
            <a href="/" title="Return to Home">
                <img src="img/banner.png" alt="MicroUrb">
            </a>
        </div><!-- banner -->

            <div id="nav">

            </div><!-- nav -->
                <div class="content">
                    <div id="footer" class="cf">
                        <div class="column three">
                            <strong>Phone</strong>
                            609.505.3395
                        </div><!-- column -->
                        <div class="column three">
                            <strong>Location</strong>
                            <!-- location to go here -->
                        </div><!-- column -->
                        <div class="column three last">
                            <strong>Hours</strong>
                            <em>Tuesday - Thursday</em><br>
                            1:00pm - 9:00pm<br><br>
                            <em>Friday and Saturday</em><br>
                            4:00pm - 11:00pm<br><br>
                            <em>Sunday - Monday</em>
                            Closed<br><br>
                        </div><!-- column -->
                    </div><!-- footer -->
                    <small>&copy;2017 MicroUrb</small>
                </div><!-- content -->


    </div><!-- wrapper -->
    <div class="copyright-info">
        <?php includes('../assets/includes/copyright.php'); ?>
    </div><!-- copyright-info -->

</body>
</html>

This is the part of my css file that is not rendering inside styles.css:

body {
    background: #f5f4f1 url('/assets/img/bg.jpg');
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #353535;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

And this is my file structure:

enter image description here

  • 写回答

3条回答 默认 最新

  • dongxiong1935 2017-05-01 19:54
    关注

    When using paths in CSS, it should be relative to the CSS file. So the following should work:

    background: #f5f4f1 url('./img/bg.jpg');
    

    You said that having the color there first doesn't work, but without it, it does. That doesn't make a lot of sense because the order of that value doesn't matter. There are only a few exceptions in the shorthand background property.

    Regardless, you can always just do this:

    background-color: #F5F4F1;
    background-image: url('./img/bg.jpg');
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?