Прозрачный png в панели навигации Django не работает
В настоящее время я создаю сайт с помощью Django. Затем я попытался добавить логотип в панель навигации, вставив png-файл с прозрачным фоном, но, как ни странно, фон остался белым. Поэтому я объединил часть base.html и часть navbar.html, чтобы создать файл test.html, и здесь изображение также отображается нормально с прозрачным фоном. Надеюсь, вы сможете помочь мне решить эту проблему. В настоящее время я использую Django 4.0.3.
Файл логотипа - IMG_1706.png
style.css пуст.
logo file test.html My django server
[код]
test.html (просто html)
<!-- navigation bar -->
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../static/bootstrap.min.css">
<!-- cubestudio CSS -->
<link rel="stylesheet" type="text/css" href="../static/style">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand"><img src="../static/IMG_1706.png" class="img-fluid" alt="CubeStudio" width="200" height="150"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-rg-0">
</ul>
</div>
</div>
</nav>
</body>
</html>
base.html (django)
{% load static %}
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- my CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
</head>
<body>
<!-- navigation bar -->
{% include "navbar.html" %}
<!-- Content to be inserted into the basic template Start -->
{% block content %}
{% endblock %}
<!-- Content to be inserted into the basic template End -->
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
<!-- javascript Start -->
{% block script %}
{% endblock %}
<!-- javascript End -->
</body>
</html>
navbar.html (django)
<!-- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'main:index' %}"><img src="../static/IMG_1706.png" class="img-fluid logo_image" alt="CubeStudio" width="150" height="112.5"></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-rg-0">
<li>
<a class="nav-link" href="{% url 'qna:index' %}">Q&A</a>
</li>
<li class="nav-item">
{% if user.is_authenticated %}
<a class="nav-link" href="{% url 'common:logout' %}">{{ user.username }} (logout)</a>
{% else %}
<a class="nav-link" href="{% url 'common:login' %}">login</a>
{% endif %}
</li>
<li>
{% if not user.is_authenticated %}
<a class="nav-link" href="{% url 'common:signup' %}">signup</a>
{% endif %}
</li>
</ul>
</div>
</div>
</nav>
Я поместил этот код в style.css:
[код]
style.css
.logo_image { background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='IMG_1706.png', sizingMethod='scale');}
но это не работает