suchen

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

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

WBOY
WBOYOriginal
2016-06-24 12:23:581207Durchsuche

背景图片高度是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>

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html打开页面就调用另一个页面的问题_html/css_WEB-ITnoseNächster Artikel：请教网站开发_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen