noa*_*ale 4 html css django-templates
如何在 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 初始图像的尺寸相同）
小智 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;
}
结果我得到了一个固定的背景和屏幕的比例。
| 归档时间： |
|
| 查看次数： |
10094 次 |
| 最近记录： |