微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

background-size: 100% 100% 上传后不起作用

如何解决background-size: 100% 100% 上传后不起作用

我有一个 Django 站点,当我在本地机器上运行它时一切正常,但是当我访问 pythonanywhere.com 时出现一个小问题:不知何故我的背景图片不想填满整个即使它在我的本地主机上运行(使用相同的浏览器,所以问题不在这里)。基本上我不介意改变纵横比,我只是想让背景的每个像素完全在屏幕上,是 600x400 还是 200x2000。

body {
    background: url("images/classes.jpg") no-repeat center center fixed;
    background-size: 100% 100%;
}

在我看来,{background-size: 100% 100%} 只是...不起作用?
我试图将百分比切换为 100vw 100vh,但输出实际上是一样的。

页面本身:http://seltsamermann.pythonanywhere.com/classes/
图片本身:https://i.ibb.co/0G86wL2/classes.jpg

我想知道可能是什么问题。

(以防万一可能会有所帮助)
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/templates/main/classes.html
https://github.com/Seltsamermann/Specs-SL-PvP/blob/master/main/static/main/style_classes.css

解决方法

object-fit CSS 属性设置被替换元素(例如 <img><video>)的内容应如何调整大小以适合其容器。将此属性用于 css 中的图像或存储该图像的容器。

object-fit: cover;

更多:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

试试这个:

body {
  background: url("") no-repeat center center fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
,

嗯,基本上我只是超越了自己;真正的问题是版本控制,我只是错过了几件事。主要帖子中的代码完全正常。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。