首页 > web前端 > html教程 > 背景图片如果小于页面高度时,背景图片固定 这个样式怎么写。_html/css_WEB-ITnose

背景图片如果小于页面高度时,背景图片固定 这个样式怎么写。_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:23:58
原创
1252 人浏览过

背景图片高度是1400像素,网页高度是1900像素,到浏览到第三屏时背景图片固定。这个怎么写,这问题不太好描述,不知道能不能看明白。


回复讨论(解决方案)

用jquery scroll()来侦测是否浏览到第三屏,然后添加一个class,使得background-position, fixed.

jQuery(window).scroll(function(){    if(jQuery(window).scrollTop() > 1399){        jQuery('html').addClass('scrolled');    }else{        jQuery('html').removeClass('scrolled');    }});
登录后复制

html {    background:url(image.jpg);    background-repeat: no-repeat;    background-position: top left;}html.scrolled {    background-attachment:fixed;    background-position: bottom left;}
登录后复制

算是笨方法 你参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{padding:0; margin:0;}body{background:url(http://b.hiphotos.baidu.com/album/w%3D2048/sign=19d4e347c2fdfc03e578e4b8e0078694/83025aafa40f4bfb2ac58bed024f78f0f7361875.jpg) 50% 0 no-repeat;}body.over{background:url(http://b.hiphotos.baidu.com/album/w%3D2048/sign=19d4e347c2fdfc03e578e4b8e0078694/83025aafa40f4bfb2ac58bed024f78f0f7361875.jpg) 50% bottom no-repeat fixed;}.box{height:5000px;}</style></head><body><div class="box"></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){	var winHeight=$(window).height();	var maxHeight=3355-winHeight; //3355为背景图片高度	$(window).scroll(function(){		if($(this).scrollTop()>maxHeight){			$("body").addClass("over");		}else{			$("body").removeClass("over");		}	});});</script></body></html>
登录后复制

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板