不能改變身體的背景
[英]Can't change the background of body
問題描述
我試圖改變身體的背景。 我正在考慮用5個不同的圖像覆蓋網頁的背景，每個圖像覆蓋一個部分（第1頁，第2頁，第3頁，第4頁和第5頁的編號）。
但是現在當我嘗試圖像不顯示時。
到目前為止，我已經嘗試過使用一張圖像，並且嘗試將其設置為身體的背景圖像。 我嘗試過使用特定背景制作div規則。 我嘗試了兩個不同的圖像。 但是似乎沒有什么改變背景。
我聲明了background-color，這樣背景就改變了，但是圖像似乎不起作用。
這是小提琴： http : //jsfiddle.net/xjcwfey3/
<p>Seems I needed this to link jfiddle.</p>
請幫助我找出問題所在。 謝謝！
2 個解決方案
解決方案1
1 2014-11-26 13:00:13
放大圖
* { margin:0; padding:0; } #wrap { width:auto; height:auto; } body { background:url(http://demo2.woothemes.com/memorable/files/2013/05/thai-food-580x352.jpg) no-repeat; } #menu { background-color:black; width:100%; position: fixed; opacity:1; } #menu ul { width: 100%; padding: 0; margin: 0; list-style-type: none; } #menu a { color:white; background-color:black; display:block; float: left; width: 20%; text-decoration: none; text-align:center; padding-top:1%; padding-bottom:1%; } #menu a:hover { background-color:white; color:black; } li { display: inline; } #page1 { background-color:white; color:black; width:50%; height:100%; text-align:center; padding-top:5%; padding-bottom:3%; padding-right:10%; padding-left:10%; margin-bottom:5%; margin-left:15%; border-radius: 20px 20px 59px 20px; -moz-border-radius: 20px 20px 59px 20px; -webkit-border-radius: 20px 20px 59px 20px; border: 0px solid #000000; -webkit-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); -moz-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); } #page2 { background-color:white; color:black; width:50%; height:100%; padding-bottom:3%; padding-top:3%; padding-right:10%; padding-left:10%; margin-bottom:5%; margin-left:15%; border-radius: 20px 20px 59px 20px; -moz-border-radius: 20px 20px 59px 20px; -webkit-border-radius: 20px 20px 59px 20px; border: 0px solid #000000; -webkit-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); -moz-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); } #page3 { background-color:white; color:black; width:50%; height:100%; padding-bottom:3%; padding-top:3%; padding-right:10%; padding-left:10%; margin-bottom:5%; margin-left:15%; border-radius: 20px 20px 59px 20px; -moz-border-radius: 20px 20px 59px 20px; -webkit-border-radius: 20px 20px 59px 20px; border: 0px solid #000000; -webkit-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); -moz-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); } #page4 { background-color:white; color:black; width:50%; height:100%; padding-bottom:3%; padding-top:3%; padding-right:10%; padding-left:10%; margin-bottom:5%; margin-left:15%; marginborder-radius: 20px 20px 59px 20px; -moz-border-radius: 20px 20px 59px 20px; -webkit-border-radius: 20px 20px 59px 20px; border: 0px solid #000000;-bottom:5%; -webkit-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); -moz-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); } #page5 { background-color:white; color:black; width:50%; height:100%; padding-bottom:3%; padding-top:3%; padding-right:10%; padding-left:10%; margin-bottom:5%; margin-left:15%; border-radius: 20px 20px 59px 20px; -moz-border-radius: 20px 20px 59px 20px; -webkit-border-radius: 20px 20px 59px 20px; border: 0px solid #000000; -webkit-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); -moz-box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); box-shadow: 6px 7px 5px 8px rgba(128,123,128,0.54); } p { font-family:"Comic Sans MS", cursive;}
<!-- http://localhost/portfolio/index.php --> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Portfolio</title> <link href="style.css" type="text/css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <!-- Menyn --> <div id="menu"> <ul> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#home">Home</a></li> <li><a href="#random">Random</a></li> </ul> </div> <div id="wrap"> <!-- Hemsidan i sin helhet--> <div id="page1"> <a id="about"></a> <h3> First Part</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada, dolor a sagittis placerat, nisi sem porttitor orci, non rutrum velit velit sed enim. Aliquam imperdiet, quam ac maximus suscipit, mauris lorem volutpat dui, quis imperdiet leo dolor a nunc. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quis sodales tortor. Sed porta nisl sed massa ullamcorper, a porttitor justo malesuada. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quiCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qu</div> <div id="page2"> <a id="portfolio"></a> <h3> Second Part</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada, dolor a sagittis placerat, nisi sem porttitor orci, non rutrum velit velit sed enim. Aliquam imperdiet, quam ac maximus suscipit, mauris lorem volutpat dui, quis imperdiet leo dolor a nunc. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quis sodales tortor. Sed porta nisl sed massa ullamcorper, a porttitor justo malesuada. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui</div> <div id="page3"> <a id="contact"></a> <h3> Third Part</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada, dolor a sagittis placerat, nisi sem porttitor orci, non rutrum velit velit sed enim. Aliquam imperdiet, quam ac maximus suscipit, mauris lorem volutpat dui, quis imperdiet leo dolor a nunc. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quis sodales tortor. Sed porta nisl sed massa ullamcorper, a porttitor justo malesuada. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quiCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qu</div> <div id="page4"> <a id="home"></a> <h3> Forth Part</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada, dolor a sagittis placerat, nisi sem porttitor orci, non rutrum velit velit sed enim. Aliquam imperdiet, quam ac maximus suscipit, mauris lorem volutpat dui, quis imperdiet leo dolor a nunc. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quis sodales tortor. Sed porta nisl sed massa ullamcorper, a porttitor justo malesuada. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui</div> <div id="page5"> <a id="random"></a> <h3> Fifth Part</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada, dolor a sagittis placerat, nisi sem porttitor orci, non rutrum velit velit sed enim. Aliquam imperdiet, quam ac maximus suscipit, mauris lorem volutpat dui, quis imperdiet leo dolor a nunc. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quis sodales tortor. Sed porta nisl sed massa ullamcorper, a porttitor justo malesuada. Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quiCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec quCurabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qui Nunc pulvinar eu massa aliquam tincidunt. Cras tincidunt dolor sagittis laoreet posuere. Fusce id bibendum libero. Vestibulum auctor nulla dolor, sit amet sollicitudin sem varius in. Aenean ullamcorper mauris in magna luctus, ac fringilla massa tincidunt. Cras vitae eros diam. Vestibulum viverra aliquam mi, vel tempus mauris luctus id. Curabitur convallis lobortis ipsum facilisis fringilla. Pellentesque vel nibh augue. Vestibulum gravida, felis nec efficitur tempus, odio diam feugiat risus, ac molestie nulla lorem vel tellus. Donec qu</div> </div><!-- DIV WRAP END --> <!-- Koder längst ner för en enkelt övergång animation när man klickar länk --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contactLink").click(function(){ if ($("#contactForm").is(":hidden")){ $("#contactForm").slideDown("slow"); } else{ $("#contactForm").slideUp("slow"); } }); }); function closeForm(){ $("#messageSent").show("slow"); setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000); } $(document).ready(function() { function filterPath(string) { return string .replace(/^\\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\\/$/,''); } $('a[href*=#]').each(function() { if ( filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/,'') ) { var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $('html, body').animate({scrollTop: targetOffset}, 1000); var d = document.createElement("div"); d.style.height = "101%"; d.style.overflow = "hidden"; document.body.appendChild(d); window.scrollTo(0,scrollToM); setTimeout(function() { d.parentNode.removeChild(d); }, 10); return false; }); } } }); }); </script> <!-- Menu fade --> <script type="text/javascript"> var $menu = $("#menu"); var opacity = $menu.css("opacity"); var scrollStopped; var fadeInCallback = function () { if (typeof scrollStopped != 'undefined') { clearInterval(scrollStopped); } scrollStopped = setTimeout(function () { $menu.animate({ opacity: 1 }, "slow"); }, 1000); } $(window).scroll(function () { if (!$menu.is(":animated") && opacity == 1) { $menu.animate({ opacity: 0 }, "slow", fadeInCallback); } else { fadeInCallback.call(this); } }); </script> <script> tiles = $("#page5, #page2, #page3, #page4").fadeTo(0, 0); $(window).scroll(function(d,h) { tiles.each(function(i) { a = $(this).offset().top + $(this).height(); b = $(window).scrollTop() + $(window).height(); if (a < b) $(this).fadeTo(1000,1); }); }); </script> </body> </html>
解決方案2
0 已采納 2014-11-26 12:59:56
更改您的：
background-image:url(images/Animation_background.jpg);
至：
background-image:url(http://i3.kym-cdn.com/photos/images/facebook/000/511/991/3a5.jpg);
似乎工作良好，這意味着您可能無權訪問images / Animation_background.jpg。
1）檢查圖片的網址，確保圖片會自動加載到瀏覽器中。 2）根據您的css文件固定圖像的路徑（您可能必須在圖像路徑前添加/）
無法更改背景顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.