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

【问题标题】：adding background image with html while adding css attributes在添加css属性的同时使用html添加背景图像
【发布时间】：2018-06-02 15:28:26
【问题描述】：

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

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

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

【问题讨论】：

... 但是当我将 css 应用于 body 标签时，图像大小不会改变 ，你是如何以及在哪里做到这一点的？添加相关代码重现问题
您必须使用 Photoshop，然后制作具有该宽度和高度的照片，这是使用 5300 X 3100 的正确方法或必须使用 5300 X 3100
我用 Photoshop 创建了我想要的尺寸。我添加了它，但现在我想更改背景图像的不透明度，我该怎么做...这是 html <body class="standard-background-color standard-font-family" background="{% static '/images/background-1.png' %}"> 这是 css .standard-background-color { opacity: 1 !important; } 但它改变了文本的不透明度而不是图像.. . @RadiantAhmed
如果你想要一个不透明的背景，那么它应该是另一个不在body标签上的div，因为它会给整个身体带来不透明度，你甚至可以在photoshop中制作不透明的图片跨度>

标签： html css django-templates

【解决方案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>

【讨论】：

好吧，我只是想这样告诉他，但我想我迟到了..：P

【解决方案2】：

如果我错了，请纠正我，但我假设您正在尝试为 html 设置背景图像的大小，该大小不受 body 的 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 将大小调整到他们的视口更实用。

【讨论】：