移动端背景无法固定

在移动端制作固定背景时（利用fixed）会出现滚动条滚动时，背景图会跟着滚动，；

解决办法就是给body加个伪元素。

body:before {
content: ‘ ‘;
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(...) center 0 no-repeat;
background-size: cover;
}

时间： 2025-01-13 17:33:14

移动端背景无法固定的相关文章

移动端背景固定

body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(bj3.jpg) center 0 no-repeat; background-size: cover; }

背景图固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动. 手机一屏的高度是960~1152px

移动端网页大小固定区域滚动/overflow:auto移动端不显示滚动条

移动端网页,要实现功能,如图片初步想法,使用dl 给dl设置固定宽高然后用overflow:auto设置滚动显示完整内容碰到问题1:滚动条不显示,但是可以正常滚动, 解决办法 <span style="font-family:Microsoft YaHei;font-size:18px;color:#333333;">/*--滚动条--*/ ::-webkit-scrollbar{ width:5px; height:5px; background-color:#ff

HTML和CSS——背景图固定

效果: 对于不规则图片,在屏幕缩小时图片适当左移,但为了不遮挡左侧文字,左移至一定位置后图片固定位置. 方法: 给背景图片设置宽度和absolute定位,使得图片浮于页面.然后在js里边判断当前窗口大小,当页面小到会致使图片遮挡左侧文字时,给图片添加left属性,这样图片就不会再向左移动了(如果文字在右侧就添加right属性). html <body> <img class="backImg" src="img/backimg.png"> &

不同分辨率下，背景图片保持居中，导航条与背景图固定位置，按原比例共同进行缩放

1.如果导航条需要居中显示,背景图与导航条切合的部分也要在图中居中 2..banner{height:260px;background:#b2d574 url(banner.jpg) center no-repeat} 3.导航条宽度与背景图切合部分宽度一致,并居中显示

用CSS3实现背景的固定

今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客..不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的模板自己改了改CSS,当加背景时遇到了一点问题,背景内容一多拉滚动条背景也跟着跑,并且背景也没有拉伸到整个页面,几经摸索,终于找到了解决办法,用CSS3的background-size.background-attrachment.background-repeat即可实现 1 body{ 2 ba

pc端背景透明，内容不透明

1. <div class="demo"> <span>背景透明,文字不透明</span> </div> 2. *{ padding: 0; margin: 0;} body{ padding: 50px; background: url(img/bg.png) 0 0 repeat;} .demo{ padding: 25px; background-color: rgba(0,0,0,0.5);/* IE9.标准浏览器.IE6和部分I

缩放浏览器时背景图片固定

今天遇到一个很奇怪的问题,页面做好后,当缩放浏览器的时候,背景图片跟着移动,这就使本来做好的内容看起来像是错位了一样,跟背景对不上. 研究了一下发现,不需要fixed 之类的,只需要给body加个 min-width:960px 就解决了. 上代码: html 1 <div class="baby-cartoon"> 2  3 <div class="floor floor1"> 4 <div

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样