gpt4 book ai didi

html - 覆盖背景使背景图像无响应

转载 作者:搜寻专家 更新时间:2023-10-31 23:24:55 25 4
gpt4 key购买 nike

#section{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
<section id="section"></section>
</body>

background-size 设置为 cover 时,图像会更改其大小以在窗口大小更改时覆盖窗口。有没有办法在开始时完全覆盖 background,然后在更改窗口大小后使图像无响应?

最佳答案

如果你想让你的背景图片在加载时填满屏幕,然后不调整大小(我会重新考虑 - 但也许我没有看到大图,没有双关语;))

一个可能的选择是在单独的 div 中加载图像,设置 z-index:-9999; (这将使 div 位于所有其他 div 的下方),然后使用 javascript 确定图像/div 覆盖整个页面时的大小,并使用 javascript 更改 div 的大小 element.style.width = ""

window.onload = function(){
theWidth = document.getElementById("background").offsetWidth;
theHeight = document.getElementById("background").offsetHeight;
document.getElementById("background").style.width = theWidth;
document.getElementById("background").style.height = theHeight;
}
#background{
position: absolute;
top:0;
height: 100%;
width:100%;
background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
<section id="background"></section>
<section id="your_content"></section>
</body>

如果您希望它不会溢出并在加载后提供水平滚动,请将背景包裹在 <div style = 'max-width:100%; overflow:hidden; position:relative;'> 中。 div - overflow:hidden;将隐藏所有溢出 div 边界的内容(比如包含图像的 div,它将保持原始宽度,而当前宽度可能更小)和 position:relative; overflow:hidden; 需要申请(IIRC - 如果我没记错的话)

关于html - 覆盖背景使背景图像无响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32861454/

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