gpt4 book ai didi

html - CSS 背景 "cover"页面重新加载后无法正确显示

转载 作者:太空宇宙 更新时间:2023-11-03 18:11:17 24 4
gpt4 key购买 nike

我正在尝试将图像背景放在全屏 div 中。

什么是工作:

  1. 在浏览器中加载代码
  2. 重新加载页面
  3. 背景应该正确显示

问题:

  1. Chrome 中加载代码浏览器
  2. 确保页面向下滚动
  3. 重新加载页面
  4. 背景被破坏

我不会使用 <html>标记,因为我需要交换背景并制作会破坏 html 的动画。

<!DOCTYPE html>
<html>
<head>
<style>
html, body, #background { height:100%; margin:0px; }

#background{
width:100%;
top: 0;
position: fixed;
background: url(http://lorempixel.com/400/200/sports/) no-repeat center center #fc0;
background-size: cover;
background-attachment: fixed;
z-index: -1;
}

#content { background: #0cf; width:400px; height:2000px; margin: 0 auto; }
</style>
</head>
<body>
<div id="background"></div>
<div id="content">The content</div>
</body>
</html>

请注意我没有使用 JSfiddle为了测试这种行为,我们实际上需要重新加载页面。

这里有一些图片,很抱歉我的回复延迟了!

1) 这是我第一次加载页面时发生的情况

When I first load the page

2) 当我向下滚动时

When I scroll down

3) 如果在我的滚动条向下时,我重新加载页面,我会得到这个!

On page reload

最佳答案

由于背景图像非常小 400 x 200 px,默认情况下背景图像会变形。

除了图像发生变化外,我在重新加载页面时没有发现任何差异。

有一个更好的分辨率图像,以避免在更大的屏幕上失真

enter image description here

关于html - CSS 背景 "cover"页面重新加载后无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23700125/

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