如何让背景图片固定在中间,滚动内容图片不动?
实例
如何设置固定的背景图像:
body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}
定义和用法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认值: | scroll |
---|---|
继承性: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.backgroundAttachment="fixed" |
可能的值
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
以上的写法 如果在手机里面会出现兼容问题,怎么办??
看下面解决方法:
body:before{
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/bj-1.jpg) top center no-repeat;
background-size: cover;
}
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步