gpt4 book ai didi

html - fixed时背景图不覆盖,不固定时不垂直覆盖

转载 作者:行者123 更新时间:2023-11-28 00:14:15 27 4
gpt4 key购买 nike

我试图将此图像设置为页面的背景,但无论出于何种原因,它都无法正常工作。目的是使背景图像覆盖页面,而不垂直或水平裁剪。

注意:CSS文件与文档相连。

HTML:
<body>
<main>
<h2 id="cityName">

</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
</body>

CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}

最佳答案

希望这对你有用:

body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}
<main>
<h2 id="cityName">

</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>

你应该尝试 background-size: Cover; 可能是图像会从右边或底部被剪切但是 background-size: 100% 100%; 图像可以拉紧。这完全取决于图像大小。

关于html - fixed时背景图不覆盖,不固定时不垂直覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55214373/

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