4

如何在 Django 模板中设置背景图像？假设我的背景图片的网址位于 www.randomlink.com/static/backgroundimagesplash.jpg

我看了看Pinterest主页。众所周知，Pinterest 是使用 Django 构建的。我在他们的主页上检查了他们的一些元素。

他们使用的图形之一是这里的初始图像：PinterestSplashImage.jpg

初始图像设置在底部中心。我注意到的一件事是，启动图像的大小相对于浏览器的大小进行了调整。

这是我当前的主页模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link href="www.randomlink.com/static/favicon.ico" rel="icon" type="image/x-icon">
<head>
<title>Homepage</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
body{
    font-family:Arial,Helvetica,sans-serif;
    font-size: 12px;
}
</style>
</head>
<body>
    {{ state }}
    <form action="/login/" method="post">
        {% if next %}
        <input type="hidden" name="next" value="{{ next }}" />
        {% endif %}
        username:
        <input type="text" name="username" value="{{ username}}" /><br />
        password:
        <input type="password" name="password" value="" /><br />

        <input type="submit" value="Log In" />
    </form>
</body>
</html>

如何将 www.randomlink.com/static/backgroundimagesplash.jpg 设置在底部中心并使其可调整大小，就像 Pinterest 对其主页所做的那样？（为了论证，初始图像将与 Pinterest 初始图像的尺寸相同）

4

3 回答 3

6

看看我是怎么做到的：在模板中，我输入了以下行：

<body id="bg" style="background-image: url('{% static "images/33.jpg"%}')";>

在CSS中：

#bg{
    background-size: 1800px 900px;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}

结果，我获得了固定的背景和屏幕的比例。

于 2017-02-02T17:11:03.240 回答
0

它的问题与 Django 无关。它是带有 CSS 的纯 html。

要在调整窗口大小时缩放图像，您应该使用background-size: containCSS3 的属性。

要放置到底部和居中，您可以使用position: absolute; background-position: 50% 100%;CSS 的属性。

最后的例子：

<style type="text/css">
.splash {
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('https://s-passets-ec.pinimg.com/webapp/app/desktop/images/logged_out_splash.77aa6339.jpg?1373235165');
    background-size: contain;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    bottom: 0;
    height: 100%;
    margin: auto;
    max-height: 461px;
    max-width: 1034px;
    position: absolute;
    width: 100%;
}
</style>

<div class="splash"></div>

在jsfiddle上查看演示

于 2013-07-10T20:13:46.230 回答
0

试试这个在你的模板中设置背景图像： 

 <div class="inner" style="background-image: url({% static "frontend/img/parallax-image.jpg" %}");>
于 2015-09-08T09:21:07.883 回答