html - Symfony + Twig + 语义 UI = 背景图像不显示

标签 html css symfony twig background-image

谁能帮我理解我的代码出了什么问题?我使用 Symfony 2.8、Semantic UI 和 Twig,并试图简单地将图片放在我网站的背景中。我正在修改我的 base.html.twig 文件来做到这一点。

我尝试过:

  1. 使用不同格式和尺寸的不同图片
  2. 将图片放在不同的位置:
    • 在应用程序/资源/ View 中
    • 在 src/AppBundle/Resources/public/images 中
    • 在 web/semantic 中——这是我保存语义 UI 文件的地方
  3. 使用不同的设置方式:
    • 作为正文标签属性
    • 作为内联样式放置在 body 标签中
    • 作为div标签中使用的内部样式
    • 作为外部样式 - 我修改了 Semantic UI css

我检查了一系列实验的路径名是否有问题。它不是。重要的是:当我尝试简单地设置背景颜色时,每次都运行良好。只有图片不显示。

有什么解决这个问题的建议吗?

这是我的 base.html.twig 文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block title %} Address Book {% endblock %}</title>
    {% block stylesheets %}
        <link href="{{ asset('/semantic/semantic.css') }}" rel="stylesheet"/>
    {% endblock %}
    {% block javascripts %}
        <script src="{{ asset('/semantic/semantic.js') }}"></script>
    {% endblock %}
</head>
<body style="background-image:url(siano.jpg)">
    <div class="ui center aligned container">
        <div class="ui grid">
            <div class="four wide column"></div>
            <div class="eight wide column">
                <p>
                    <h1> Address Book </h1><br>
                </p>
                {% block body %}{% endblock %}
            </div>
            <div class="four wide column"></div>
        </div>
    </div>
</body>

在上述情况下文件结构是:

AppBundle
    Resources
        views
            base.html.twig
            siano.jpg

最佳答案

试试这个:

将您的图像移动到 web/images。

然后:

<body style="background-image:url('{{ asset('images/siano.jpg') }}')">
<div class="ui center aligned container">
    <div class="ui grid">
        <div class="four wide column"></div>
        <div class="eight wide column">
            <p>
                <h1> Address Book </h1><br>
            </p>
            {% block body %}{% endblock %}
        </div>
        <div class="four wide column"></div>
    </div>
</div>

关于html - Symfony + Twig + 语义 UI = 背景图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45330046/

相关文章:

javascript - 使用javascript检测当前部分

css - 盒子扩展 CSS <p> 元素

html - 如何实现像鸡蛋一样的边框半径

symfony - 在 symfony 2.1 中安装并运行 LiipImagineBundle

php - symfony 每两秒从一个页面重定向到另一个页面

javascript - 如何更改数据表的位置长度菜单?

javascript - UTC 实时时钟,不适用于负时区

html - 父级悬停时子级的不兼容 css 更改

php - Symfony2 : string values from choice fields not bound to form object

html - 响应 <li> 不会缩小到包含图像的大小