Question

我有一个Django项目，我想在HTML模板中添加背景图像。我有以下代码：

<body class="standard-background-color standard-font-family" background="{% static '/images/background1.jpg' %}">

显示原始尺寸为5300 X 3100或类似的尺寸。我想更改背景图像的图像大小，但是当我将css应用于body标签时，图像大小不会改变。如何将图像尺寸更改为1920 x 1080 ...

Answer 1

正如Radiant Ahmed在他的评论中指出的那样，如果你想要一个不透明的背景，那么它应该是另一个div

考虑到这一点，您可以使用pseudo element来创建背景图像容器。

此外，无需在Photoshop中调整实际图像大小以适应屏幕（虽然它有点大），请改用background-size: cover。

background-size属性的工作原理MDN

div {
  width: 200px;
  height: 200px;
  background: red;
}

body::after {
  content: '';
  background: url('https://fillmurray.com/500/500');
  background-size: cover;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div>
  <p>Yo! I'm the content!<p>
</div>

Answer 2

如果我错了，请纠正我，但我假设您正在尝试为html设置背景图片的大小，而不受身体CSS的影响。

在这种情况下，只需在briancaffey之后添加!important，以便它不会被其他CSS覆盖：

html {
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

不建议将背景大小设置为1920x1080，因为人们具有不同的视口大小，因此使用background-size: cover将大小调整为其视口更为实际。

在添加css属性的同时使用html添加背景图像

2 个答案: