使用模板变量时 Django 模板不呈现 CSS

Question

我正在尝试在 Django 中使用 HTML 和 CSS 构建付费专区，但不知何故，应该淡化部分文本的 CSS 没有呈现。这是我所拥有的：

<style>
    .adjust-image {

        display: block;
        width: auto;
        max-width: 100%;
        max-height: 1000px;

    }

    .blur-text {
       filter: blur(5px);
       user-select: none;
       pointer-events: none;
    }

    .fade-out {
        user-select: none;
        position: relative;
    }
    .fade-out:after {
       content: "";
       height: 75%;
       width: 100%;
       position: absolute;
       bottom: 0;
       left: 0;
       background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    }

    #paywall-wrapper {
       padding: 35px;
       border-radius: 5px;
       position: relative;
       margin-bottom: 30px;
       box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
    }
       #paywall-wrapper * {
          text-align: center;
       }
          #paywall-wrapper .btn {
             left: 50%;
             transform: translateX(-50%);
             position: relative;
          }
</style>

<div class="display-margins">
    <div>
        <h5>{{solution.questionToProblem}}</h5>
        <h6><b>Solution</b></h6>

        {% if request.user.is_anonymous or solution.free != True and request.user.is_subscriber != True %}
            <p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>


            <div id="paywall-wrapper">
                <h4>Premium Subscription</h4>
                <p>To view this solution, get our subscription for just <strong>$17</strong>.</p>
                <a class="btn btn-primary text-light" href = "{% url 'subscribe' %}">Subscribe</a>
            </div>
        {% else %}
            <p class="noselect format-paragraph">{{solution.solutionToProblem|safe}}</p>

            {% for s in solution_images %}
                <img class = "adjust-image noselect" src="{{ s.photo.url }}">
                <br></br>
            {% endfor %}

        {% endif %}
        {% render_comments solution request %}
        <br class= "extra_spacing"></br>
    </div>
</div>

理想情况下，付费专区的文本应该像这样淡出：

但是当我的 <p> 标签中有模板变量时它不会呈现：

令人惊讶的是，如果我手动在 <p> 标签中输入内容，它也能工作。但是当我使用 <p>{{random content}}</p> 时，它不起作用。

当我说 <p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p> 时，我的 CSS 或 HTML 有什么问题？

Answer 1

确保当您希望将 CSS 集成到 Django 中，并且您的模板变量中有 HTML 时，请使用：

{{put_your_template_variable|striptags}}

而不是safe。