Question

我不确定为什么我的图像和样式没有渲染。我试过../../，我试过没有/我试过了../.

这是我的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>

这是我的css文件中没有在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;
}

这是我的文件结构：

Answer 1

您可以尝试以下操作：

./img/banner.png

所以你在styles.css中并希望在index.php页面上呈现图像。这是一个背后的目录：

 url('../images/image.png');

也可以尝试使用

 background-image

而不是

 background.

Answer 2

在CSS中使用路径时，它应该与CSS文件相关。所以以下内容应该有效：

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

你说过那种颜色首先不起作用，但没有它，它确实有效。这并没有多大意义，因为这个价值的顺序并不重要。简写background属性中有only a few exceptions。

无论如何，你总是可以这样做：

background-color: #F5F4F1;
background-image: url('./img/bg.jpg');

Answer 3

我玩了你的代码并得到了图片，我认为css似乎正在运作。当我更改他们在页面上更改的值。我希望你看到下面的文件结构。

{{1}}

祝你好运

我的图片和样式无法渲染

3 个答案: