gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:27:07 25 4
gpt4 key购买 nike

我有一个 Django 元素,我想将背景图像添加到 HTML 模板中。我有以下代码:

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

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

最佳答案

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

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

此外,无需在 Photoshop 中调整实际图像的大小以适应屏幕(尽管它有点大),而是使用 background-size: cover

背景大小属性的工作原理 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>

关于html - 在添加 css 属性时使用 html 添加背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47899784/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com